98

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

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

4

4 に答える 4

132

疑似クラスは、最初はHTML4と属性:checkedを持つ要素に適用されますselectedchecked

出典：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 */
于 2011-12-23T18:37:08.260 に答える
21

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

于 2013-03-05T13:20:11.807 に答える
3

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

select option {
   color: black;
}
select:not(:checked) {
   color: gray;
}
于 2013-12-12T08:58:03.710 に答える
0

受け入れられた回答からのCSSも私には機能しません。しかし、このインラインスタイルは機能します。Firefox86およびChrome88でテスト済み。

<select>
    <option value="1" style="display:none;" selected>One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

于 2021-03-08T17:41:36.763 に答える