CSS: 与: check 类似的选择的伪类，但是用于 < option > 元素

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

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

248245 次浏览
小开
最佳答案

: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>

在 关门了下拉列表中，你可以尝试逆转这个逻辑来设计当前选择的选项:

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

实际上，您只能在 : 修改选项元素上设计少量 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>

在壁虎/网络工具箱上工作。

小开

This worked for me :

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

从接受的答案 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>


提交答案