html - CSS :selected pseudo class similar to :checked, 但对于 元素

Question

有没有办法为当前选择的 <option> 设置样式？ <select> 中的元素元素？

然后我可以为当前选定的选项元素提供背景颜色吗？这样我就可以设置当前在关闭的下拉列表中可见的选项的样式。

Answer 1

the :checked pseudo-class initially applies to such elements that have the HTML4 selected and checked attributes

来源:w3.org

---

因此，尽管 color 的样式在所有浏览器中都不可能，但此 CSS 有效:

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 */