<option>
要素内で現在選択されている要素のスタイルを設定する方法はあり<select>
ますか?
次に、現在選択されているオプション要素に背景色を付けることができますか?そうすれば、閉じたドロップダウンに現在表示されているオプションのスタイルを設定できます。
回答:
: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 */
実際には、: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で動作します。