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

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

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

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

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

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

欢呼声:/

设置:使用Mac版Chrome

最佳答案

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

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%);
}