我可以只使用CSS在HTML选择选项中为所选项目的背景上色吗？

我到处搜索，看到有人建议：

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

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

我不能让它工作。我做错了吗

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

干杯：/

---

设置：将Chrome应用于Mac

：：选择

不适用于所选选项；它适用于突出显示的文本。要么你误解了他们的建议，要么他们说的完全错了

根据，您应该能够使用

选项：checked

设置所选项目的样式：

#dropdowns option:checked {
    background: red;
}

---

但是我还没能让它为中的

或

元素工作。

适合您的CSS选择器应该是

：选中

：：选择仅适用于已高亮显示的文本：



我发现这一点是因为我遇到了同样的问题，我确实找到了一个奇怪的解决方案，它似乎至少适用于chrome和其他浏览器。解决方案是使用属性选择器。这似乎与chrome一起工作，我在js fiddle中测试了它。另一个注意事项是，该框没有立即改变颜色为背景红色，但一旦我选择了另一个选项，我可以清楚地看到它确实变成了红色。您可以在上面列出的JSFIDLE中查看它


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

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

请参阅此处的完整演示：
感谢您链接到文档，看起来：checked未按预期工作，我将在几分钟后对上面的内容进行评论。干杯！嗨，谢谢你在我有机会告诉你它不起作用之前编辑：）-维尔德！谢谢你的提琴。如果你在这里看到fiddle修改的话，我看到[selected]有点效果：-虽然结果很奇怪，你能看一下吗？@仅仅是开发：你可以使用
[selected]
而不是
：选中的
，但它只适用于加载页面时选择的任何选项（因为它是一个属性选择器）。如果您更改选择，样式将不会更新。好的，谢谢您坚持！所以我们的意思是：出于某种原因，checked对选项不起作用（引用原始JSFIDLE）？你认为这是一个错误吗？好吧，我想原来的问题已经解决了。是，可以使用[选定]为背景上色。真可惜，这太糟糕了。谢谢你的帮助@BoltClock@Mere发展：我建议将已接受的答案改为Marcel Tschopp的答案。类似：我认为这应该是已选择的答案。因此显然，您只能用图像替换默认高亮颜色，而不能使用其他颜色？有道理…这在Microsoft Edge上确实有效。“IE/Edge”通常指IE11上的Edge模式，与IE11相同。如果你想谈论新浏览器，可以叫它“微软边缘”或“边缘”，但不要叫它IE，它不是IE。
select[multiple]:focus option:checked {
  background: red linear-gradient(0deg, red 0%, red 100%);
}