CSS:选择的伪类类似于:checked,但是对于<select>元素

Question

有没有办法在<option>元素中设置当前所选元素的样式<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>

要在关闭的下拉列表中设置当前所选选项的样式,您可以尝试反转逻辑:

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

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>

适用于gecko/webkit.