html - 请问伪类 :checked will select inputs with type radio or checkbox, 而不是 <option> 元素?

标签 html css

我在评估测试中遇到了这个问题。我知道它对 radio 和复选框是正确的。但不确定。如果它不起作用,那么可以做些什么来将 CSS 添加到选定的下拉选项中。 我试过了,但效果不佳。

<!DOCTYPE html>
<html>
<body>
<style>
select { color: red; }
option:not(:checked) { color: black; } 
</style>
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi">Audi</option>
</select>

</body>
</html>

最佳答案

要在关闭的下拉列表中设置当前所选选项的样式,您可以使用:

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

看这个:CSS :selected pseudo class similar to :checked, but for <select> elements

关于html - 请问伪类 :checked will select inputs with type radio or checkbox, 而不是 <option> 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46507197/

相关文章:

php - 如何动态包含 html 字符串

php - Wordpress PHP 和 HTML5 详解

javascript - 是否有可能知道在 Javascript/jQuery 中呈现的 HTML 的垂直维度?

html - z-index 在 IE 中工作,但在 Edge 中不起作用

jquery每次计数问题?

html - 防止文本在复选框下换行

javascript - JQuery 将鼠标悬停在子元素上以更改父元素的 CSS

html - Box-sizing 属性无法按预期与 Bootstrap 列一起使用

animation - 分享很棒的 CSS3 技巧的地方

html - 已经实现时如何更改鼠标悬停时的 tr 颜色?