CSS：selected伪类类似于：checked，但用于<select>元素

86

有没有一种方法可以设置<option>元素中当前选定元素的样式<select>？

然后可以为当前选择的选项元素提供背景颜色吗？这样，我可以设置关闭下拉菜单中当前可见的选项的样式。

html css css-selectors pseudo-class

— 网页设计师
source

123

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

资料来源：w3.org

因此，尽管color无法在所有浏览器中进行样式设置，但此CSS仍然有效：

option:checked { color: red; }

此操作的一个示例，从下拉列表中隐藏了当前选定的项目。

option:checked { display:none; }

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

要在关闭的下拉菜单中设置当前选定选项的样式，您可以尝试反转逻辑：

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

— 埃米特
source

4

你测试了吗？在FF8上，它似乎对我不起作用。 更新：它在Chromium 15中也不起作用。

— Brigand

1

@emmett我也在Chrome 16中进行了检查。正如我在上一条评论中所说，它会在下拉列表中设置所选选项的样式，但不会在关闭的可见区域中设置该样式。

— Web_Designer 2011年

2

@Web_Designer好，我看到了问题。我用另一个（奇怪的）解决方案编辑了答案。

— 艾美特（Emmett）

Chrome无法接受已接受的答案。您可以在此处进行测试：jsfiddle.net/hk4s0ech

— Andre Chenier

17

实际上，您只能在：modified选项元素上设置少量CSS属性的样式。 color也不起作用，background-color但是您可以设置一个background-image。

您可以将其与渐变结合使用以达到目的。

option:hover,
option:focus,
option:active,
option:checked {
  background: linear-gradient(#5A2569, #5A2569);
}

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

适用于gecko / webkit。

— 安特旺
source

接受的答案对我不起作用，但是此解决方案起作用。谢谢！

— Anthony Hilyard '16

请注意，您还可以像这样对它应用过滤器：Option：checked {filter：grayscale（1）;}这类似于如今您可以在Chrome中设置复选框和单选按钮的样式，以使其变为非蓝色。

— KS74

3

这为我工作：

select option {
   color: black;
}
select:not(:checked) {
   color: gray;
}

— 新威特
source