CSS :selected 伪类类似于 :checked，但用于 <option> 元素答案

【问题标题】：CSS :selected pseudo class similar to :checked, but for <option> elementsCSS :selected 伪类类似于 :checked，但用于 <option> 元素
【发布时间】：2012-01-27 00:16:18
【问题描述】：

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

然后我可以给当前选择的选项元素一个背景颜色吗？这样我就可以设置关闭下拉列表中当前可见的选项的样式。

【问题讨论】：

标签： html css css-selectors pseudo-class

【解决方案1】：

已接受答案中的 css 也不适用于我。但是这种内联样式有效。在 Firefox 86 和 Chrome 88 上测试。

<select>
    <option value="1" style="display:none;" selected>One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

【讨论】：

什么？第一个选项不显示？这将达到什么目的？

【解决方案2】：

实际上，您只能在 :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。

【讨论】：

接受的答案对我不起作用，但这个解决方案可以。谢谢！
请注意，您也可以像这样对其应用过滤器： Option:checked{filter:grayscale(1);} 这类似于现在您可以在 Chrome 中设置复选框和单选按钮的样式以使其非-蓝色。

【解决方案3】：

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

来源：w3.org

所以，这个 CSS 可以工作，尽管在每个浏览器中都无法设置 color 的样式：

option:checked { color: red; }

一个实际的例子，从下拉列表中隐藏当前选定的项目。

option:checked { display:none; }

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

要在 close 下拉列表中设置当前选定选项的样式，您可以尝试颠倒逻辑：

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

【讨论】：

你测试了吗？在 FF8 上为我提供 doesn't seem to work。 更新： 它在 Chromium 15 中也不起作用。
@emmett 我也在 Chrome 16 中检查过它。正如我在之前的评论中所说，它在下拉列表中设置了选定选项的样式，而不是关闭的可视区域中的选项。
@Web_Designer 好的，我明白了。我用另一个（古怪的）解决方案编辑了我的答案。
接受的答案在 chrome 中对我不起作用。你可以在这里测试：jsfiddle.net/hk4s0ech

【解决方案4】：

这对我有用：

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

【讨论】：