我可以仅使用CSS为HTML选择选项中的选定项目的背景着色吗？

小编典典

css

我搜索了很多东西，发现有人建议：

::-moz-selection {background: red;}
::selection {background: red; }

..用于为多选表单项中的当前选中项的背景着色。（注意：我指的是选定的项目，而不是具有焦点的项目）。

我无法使它正常工作。我做错了吗？

#dropdowns select::selection {
    background: red;
}

欢呼声：/

设定：使用Mac版Chrome

阅读 334

2020-05-16

共1个答案

小编典典

不仅可以设置背景色，还可以将线性渐变设置为背景：

option:checked {
  background: red linear-gradient(0deg, red 0%, red 100%);
}

可以在IE11和最新的Chrome和Firefox中使用。Safari只是忽略它。没有测试IE / Edge。

如果您只想为重点多选设置背景色，则可以使用以下代码段：

select[multiple]:focus option:checked {
  background: red linear-gradient(0deg, red 0%, red 100%);
}

2020-05-16