CSS :selected 伪类类似于 :checked，但用于 <op-前端问题

CSS :selected pseudo class similar to :checked, but for lt;optiongt; elements(CSS :selected 伪类类似于 :checked，但用于 lt;optiongt;元素)

本文介绍了CSS :selected 伪类类似于 :checked，但用于 <option>元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

Is there a way to style the currently selected <option> element in a <select> element?

然后我可以给当前选择的选项元素一个背景颜色吗?这样我就可以设置关闭下拉列表中当前可见的选项的样式.

I could then give a background color to the currently selected option element? That way I can style the option that's currently viewable in the closed dropdown.

推荐答案

:checked 伪类最初适用于具有 HTML4 selected 和 checked 属性的元素

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

来源:w3.org

所以，这个 CSS 可以工作，尽管在每个浏览器中都无法设置 color 样式:

So, this CSS works, although styling the color is not possible in every browser:

option:checked { color: red; }

<小时>

一个实际的例子，从下拉列表中隐藏当前选定的项目.

An example of this in action, hiding the currently selected item from the drop down list.

option:checked { display:none; }

<select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

要在 close 下拉列表中设置当前选定选项的样式，您可以尝试颠倒逻辑:

To style the currently selected option in the closed dropdown as well, you could try reversing the logic:

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

这篇关于CSS :selected 伪类类似于 :checked，但用于 <option>元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！