我能否只使用CSS为HTML select选项中选择的项目着色背景？

Question

我查了很多资料，看到有人建议：

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

这段代码用于给多选框中当前选定的项目着色（注意：我指的是已选中的项目，而不是具有焦点的项目）。

我无法让它起作用，我做错了吗？

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

谢谢 :/

设置：使用Mac上的Chrome浏览器

- Mere Development

---

类似于CSS中的:checked伪类，但是用于<select>元素的选择伪类是什么？ - BoltClock

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

点击此处查看完整示范：http://codepen.io/marceltschopp/pen/PNyqKp

- Marcel Tschopp

---

我认为这应该是被选中的答案。 - dokgu

所以显然你只能用图像而不是不同的颜色来替换默认的高亮颜色？这很有道理... - BoltClock

这在Microsoft Edge上可以运行。 "IE / Edge"通常指的是IE11上的Edge模式，与IE11相同。如果您想谈论新浏览器，请称其为“Microsoft Edge”或“Edge”，但不要称其为IE。它不是IE。 - BoltClock

Answer 2

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

根据这个答案，你应该能够使用 option:checked 来为选定的项目设置样式：

#dropdowns option:checked {
    background: red;
}

但是我无法让它在这个测试用的示例中正常工作，对于<select>或<select multiple>元素。

- BoltClock

---

嗨，谢谢你之前的编辑。我还没来得及告诉你它不起作用:) - 奇怪！感谢你的示例。我发现如果你在这里修改你的示例：http://jsfiddle.net/vzDvK/1/，[selected]似乎有点起作用 - 不过结果很奇怪，请你看一下可以吗？ - Mere Development

@Mere Development：你可以使用[selected]代替:checked，但它只适用于页面加载时选择的选项（因为它是一个属性选择器）。如果你改变了选择，样式就不会更新。 - BoltClock

好的，感谢您一直在关注这个问题！所以我们是在说：对于某些原因（参考您最初的jsfiddle），选项中的:checked属性无法正常工作？您认为这是一个错误吗？ - Mere Development

好的，我想原始问题已经得到了回答。是的，可以使用[selected]来着色背景。虽然有点糟糕，但还是谢谢@BoltClock的帮助。 - Mere Development

@Mere Development：我建议将采纳的答案改为Marcel Tschopp的。 - BoltClock

Answer 3

我发现这个问题是因为我遇到了相同的问题，我找到了一个奇怪的解决方案，它似乎至少在Chrome和其他浏览器中都有效。解决方案是使用属性选择器。这似乎在Chrome中起作用，在js fiddle中我进行了测试。值得一提的是，该框未立即更改为背景红色，但是一旦我选择了另一个选项，我就可以清楚地看到它确实变成了红色。你可以在上面列出的jsfiddle中查看它。

http://jsfiddle.net/vzDvK/1/

#dropdowns option[selected] {
    background: red;
}

- Chris Hinshaw

Answer 4

适合您的CSS选择器是:checked

::selection仅适用于已经被高亮的文本：

• http://reference.sitepoint.com/css/pseudoelement-selection

- mas-designs

---

感谢您链接到文档，看起来:checked的工作不如预期，我会在一分钟内发表评论。干杯！ - Mere Development