CSS:selected类似于:checked,但是对于< select>元素 [英] CSS :selected pseudo class similar to :checked, but for <select> elements
问题描述
是否有一种方法来定义< select>
元素中当前选中的< option>
?
那么我可以给当前选择的选项元素一个背景颜色吗?
:checked
伪类最初适用于已经选择了HTML4和
的元素
属性
资料来源: w3.org
所以,这个CSS工程,虽然样式的 color
是不可能在每个浏览器:
}
选项:checked {display:none; }
< select& < option> A< / option> < option> B< / option> < option> C< / option>< / select>
要在关闭下拉菜单中设置当前所选选项的样式,您可以尝试颠倒逻辑:
select {color:red; }
选项:not(:checked){color:black; } / *或任何默认样式是* /
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.
解决方案the
:checked
pseudo-class initially applies to such elements that have the HTML4selected
andchecked
attributesSource: w3.org
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>
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,但是对于< select>元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!