<選択>ハイライト色の変更

Question

<select>の強調表示色を変更するには、CSSを使用してカーソルがその上を通過するときに<li>を強調表示しますか？

Answer 1

「<li>」を強調する色について何を意味するのかわかりませんが、<option>要素の背景色を変更したいようです。私はそれを試してみましたが、うまくいきません、あなたは常にシステムカラーを取得します。

マウスオーバーで<select>要素全体を強調表示したい場合、この種の機能があります：

select:hover { background-color: red; }

ただし、動作はブラウザによって異なります。たとえば、Chromeはドロップダウンのオプションを強調表示しませんが、Firefoxは強調表示しますが、マウスを離してもプルダウンされたままになっても元に戻りません。

多くの同様の質問で述べられているように、フォームコントロールを確実にスタイルすることはできません。 詳細はこちら .

Answer 2

-> background:#f9f9f9のような方法でオプションのハイライト色を変更することはできません

次のようなことができます：

            select > option:hover{
                box-shadow: 0 0 10px 100px #FED20F inset;
                transition: all .2s ease-in-out;
            }

Answer 3

上記のように、background-colorただし動作​​します:hoverはIE7でバグがあります-Doctypeをstrictに設定すると役立ちます。