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

Question

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

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; }を試してみましたが、それは役に立ちません。誰もこれを行う方法を知っていますか？

Answer 1

選択/オプション要素は、HTMLではなくOSによってレンダリングされます。これらの要素のスタイルは変更できません。

Answer 2

これは、インセットボックスの影を実装することによって実行できます。 例：

ここ

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

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

希望があります。

Answer 3

これは、何が必要子コンビネータです：

select>option:hover 
    { 
     color: #1B517E; 
     cursor: pointer; 
    } 

は完璧に動作し、それを試してみてください。

ここに参照です：http://www.w3schools.com/css/css_combinators.asp

Answer 4

私はこれは古い質問です実現が、私は最近、このようなニーズに出くわしたとjQueryとCSSを使用して、次の解決策を考え出した：

jQuery('select[name*="lstDestinations"] option').hover(
     function() { 
      jQuery(this).addClass('highlight'); 
     }, function() { 
      jQuery(this).removeClass('highlight'); 
     } 
    ); 

とCSS ：

.highlight { 
    background-color:#333; 
    cursor:pointer; 
} 

これはおそらく他の人に役立ちます。インセットボックスシャドウCSSを実装

Answer 5

は、Firefoxで動作します：

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

チェックオプションアイテムはChromeで動作します：FFで

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

Answer 6

もCSSフィルタが正常に動作します。例えば。色相回転：

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

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

Answer 7

問題でもJavaScriptがががoption要素が推移している見ていないということです。これはただ単にCSSを使用することによって、（少なくともいつでもすぐに）解決されることはないだろうかに重点を置くことです：

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

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