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 HTML4 selected and checked attributes
Source: 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，但是对于&lt; select&gt;元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！