CSS：选定的伪类似于：checked，但是用于<select>元素

有没有一种方法来设置<select>元素中当前选定的<option>元素的样式？

然后，我可以给当前选定的选项元素一个背景颜色？ 这样，我可以在closures的下拉菜单中select当前可查看的选项。

Answer 1

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

Answer 2

实际上，您只能在修改的选项元素上设置几个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> 

Answer 3

这对我工作：

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