html - CSS :selected 伪类类似于 :checked，但用于元素

Question

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

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

Answer 1

:checked伪类最初适用于具有 HTML4selected和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 */

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

适用于壁虎/webkit。

Answer 3

这对我有用：

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

Answer 4

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