Question

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

然后，我可以为当前选定的选项元素提供背景颜色？这样我就可以设置当前在关闭下拉列表中可见的选项。

Answer 1

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

Answer 2

实际上，您只能在：modified 选项元素上设置几个CSS属性。 color不起作用background-color，但您可以设置background-image。

你可以将它与渐变结合起来来做到这一点。

＆＃13;

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

＆＃13;

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

＆＃13;

适用于gecko / 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>

CSS：选择的伪类类似于：checked，但是对于<select>元素</select>

4 个答案: