84

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

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; }ましたが、だめです。誰もこれを行う方法を知っていますか?

4

8 に答える 8

32

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

于 2013-03-26T01:25:15.817 に答える
11

インセット ボックス シャドウ CSS の実装は、Firefox で機能します。

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でテストがあります

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

この問題について Chris Coyier が見つけた最新の記事 (2019 年 10 月 28 日) https://css-tricks.com/the-current-state-of-styling-selects-in-2019/

于 2015-10-20T09:38:05.910 に答える
-5

これは古い質問だと思いますが、最近この必要性に出くわし、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;
}

おそらくこれは他の誰かを助けるでしょう。

于 2014-12-24T15:56:59.390 に答える
-10

これはあなたが必要とするものです、子コンビネータ：

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

試してみてください。完璧に動作します。

参照は次のとおりです。 http://www.w3schools.com/css/css_combinators.asp

于 2014-04-08T02:03:36.640 に答える