我可以仅使用CSS为HTML选项中的所选项目添加背景吗？

Question

我经常搜索并看到人们暗示:

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

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

我不能让这个工作.我做错了吗？

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

干杯:/

设置:使用Chrome for Mac

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