web-dev-qa-db-ja.com

ホバーで選択リストオプションの背景色を変更する

ホバー時に選択リストオプションのデフォルトの背景色を変更することは可能ですか？

HTML：

<select id="select">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

option:hover { background-color: red; }を試しましたが、役に立ちません。誰もこれを行う方法を知っていますか？

htmlcssdrop-down-menu
49
Gopesh

これは、インセットボックスシャドウを実装することで実行できます。例えば：

select.decorated option:hover {
    box-shadow: 0 0 10px 100px #1882A8 inset;
}

ここで、.decoratedは、選択ボックスに割り当てられたクラスです。

あなたがポイントを得たことを願っています。

34
user2964504

Select/Option要素は、HTMLではなくOSによってレンダリングされます。これらの要素のスタイルを変更することはできません。

10
Priyesh

FirefoxでインセットボックスシャドウCSSを実装する：

select option:checked,
select option:hover {
    box-shadow: 0 0 10px 100px #000 inset;
}

チェックされたオプション項目はChromeで機能します。

select:focus > option:checked { 
    background: #000 !important;
}

https://codepen.io/egle/pen/zzOKLe にテストがあります

私にとってこれはChromeバージョン76.0.3809.100（公式ビルド）（64ビット）で動作しています

6
Egle Kreivyte

問題は、JavaScriptでさえnotホバーされているoption要素を参照することです。これは、CSSだけを使用して（少なくともいつでも）解決されない方法に重点を置くためです。

window.onmouseover = function(e)
{
 console.log(e.target.nodeName);
}

のみこの問題を解決する方法（ブラウザベンダーがバグを修正するのを何千年も待っているだけでなく、あなたがやろうとしていることを妨げるものは言うまでもありません）は、ドロップダウンメニューを独自のものに置き換えることですJavaScriptを使用したHTML/XML。これには、select要素をul要素に置き換えることと、radio要素ごとにinputli要素を使用することが含まれる可能性があります。

2
John

FFでもCSSフィルターは正常に機能します。例えば。色相回転：

option {
    filter: hue-rotate(90deg);
}

https://jsfiddle.net/w3a740jq/4/

1
mat3e