猿问
下载APP

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

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

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

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


米脂
浏览 66回答 3
3回答

倚天杖

的:checked伪类最初适用于具有这样的HTML4元素selected和checked属性资料来源:w3.org所以,这个CSS有效,虽然color在每个浏览器中都不可能进行样式化:option:checked&nbsp;{&nbsp;color:&nbsp;red;&nbsp;}此实例的一个示例是,从下拉列表中隐藏当前选定的项目。option:checked&nbsp;{&nbsp;display:none;&nbsp;}<select> &nbsp;&nbsp;&nbsp;&nbsp;<option>A</option> &nbsp;&nbsp;&nbsp;&nbsp;<option>B</option> &nbsp;&nbsp;&nbsp;&nbsp;<option>C</option></select>要在关闭的下拉列表中设置当前所选选项的样式,您可以尝试反转逻辑:select&nbsp;{&nbsp;color:&nbsp;red;&nbsp;}option:not(:checked)&nbsp;{&nbsp;color:&nbsp;black;&nbsp;}&nbsp;/*&nbsp;or&nbsp;whatever&nbsp;your&nbsp;default&nbsp;style&nbsp;is&nbsp;*/

弑天下

实际上,您只能设置几个CSS属性:修改后的选项元素。&nbsp;color也不起作用,background-color但你可以设置一个background-image。你可以将它与渐变结合起来来做到这一点。option:hover,option:focus,option:active,option:checked&nbsp;{ &nbsp;&nbsp;background:&nbsp;linear-gradient(#5A2569,&nbsp;#5A2569);}<select> &nbsp;&nbsp;<option>A</option> &nbsp;&nbsp;<option>B</option> &nbsp;&nbsp;<option>C</option></select>适用于gecko / webkit。

qq_花开花谢_0

这对我有用:select&nbsp;option&nbsp;{ &nbsp;&nbsp;&nbsp;color:&nbsp;black;}select:not(:checked)&nbsp;{ &nbsp;&nbsp;&nbsp;color:&nbsp;gray;}
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答