web-dev-qa-db-ja.com

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

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

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

htmlcsscss3css-selectorspseudo-class
72
Web_Designer

: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>

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

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

実際には、：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で動作します。

15
Antwan

これは私のために働いた：

select option {
   color: black;
}
select:not(:checked) {
   color: gray;
}
2
Neoweiter