CSS:selected疑似クラス:checkedに似ていますが、<select>要素用です


86

<option>要素内で現在選択されている要素のスタイルを設定する方法はあり<select>ますか?

次に、現在選択されているオプション要素に背景色を付けることができますか?そうすれば、閉じたドロップダウンに現在表示されているオプションのスタイルを設定できます。

回答:


123

:checked擬似クラスは、最初はHTML4持っているような要素に適用selectedし、checked属性を

出典:w3.org


したがって、このCSSは機能しcolorますが、すべてのブラウザーでスタイル設定が可能であるとは限りません。

option:checked { color: red; }

ドロップダウンリストから現在選択されているアイテムを非表示にする、この動作の例。

option:checked { display:none; }
<select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>


閉じたドロップダウンで現在選択されているオプションのスタイルを設定するには、ロジックを逆にしてみてください。

select { color: red; }
option:not(:checked) { color: black; } /* or whatever your default style is */

5
テストしましたか?動作していないようFF8に私のために。 更新: Chromium15でも機能しません。
ブリガンド2011

1
@emmett Chrome 16でもチェックしました。前のコメントで述べたように、ドロップダウンリストで選択したオプションのスタイルを設定しますが、閉じた表示領域のオプションのスタイルは設定しません。
web_Designer 2011

2
@Web_Designerわかりました、問題が発生しました。私は別の(奇抜な)解決策で答えを編集しました。
エメット2011

受け入れられた答えは私にとってクロムでは機能しません。ここでテストできます:jsfiddle.net/hk4s0ech
アンドレシェニエ

18

実際には、:modifiedオプション要素でスタイルを設定できるCSSプロパティはごくわずかです。 colorも機能しませんbackground-colorが、を設定できますbackground-image

これをグラデーションと組み合わせてトリックを行うことができます。

option:hover,
option:focus,
option:active,
option:checked {
  background: linear-gradient(#5A2569, #5A2569);
}
<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

gecko / webkitで動作します。


受け入れられた答えは私にはうまくいきませんでしたが、この解決策はうまくいきました。ありがとうございました!
Anthony Hilyard 2016年

次のようにフィルターを適用することもできます。Option:checked {filter:grayscale(1);}これは、Chromeでチェックボックスとラジオボタンのスタイルを設定して青色以外にする方法と似ています。
KS 7420

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.