我可以仅使用 CSS 为 HTML 选择选项中所选项目的背景着色吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9309844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I colour backgrounds of selected items in HTML select options with CSS only?
提问by Mere Development
I've searched around a lot and see people suggesting that:
我搜索了很多，看到有人建议：
::-moz-selection {background: red;}
::selection {background: red; }
..works for colouring the background of the currently selected items in a multiple select form item. (Note: I mean the selected items, not the items with focus).
.. 用于为多选表单项目中当前选定项目的背景着色。（注意：我的意思是选定的项目，而不是具有焦点的项目）。
I can't get this to work. Am I doing it wrong?
我不能让它工作。我做错了吗？
#dropdowns select::selection {
background: red;
}
Cheers :/
干杯：/
Setup: Using Chrome for Mac
设置：使用 Mac 版 Chrome
回答by Marcel Tschopp
Instead of only setting a background-color you can also set a linear-gradient as background:
除了设置背景颜色之外，您还可以将线性渐变设置为背景：
option:checked {
background: red linear-gradient(0deg, red 0%, red 100%);
}
This works in IE11 and latest Chrome and Firefox. Safari just ignores it. Did not test IE/Edge.
这适用于 IE11 和最新的 Chrome 和 Firefox。Safari 只是忽略它。没有测试 IE/Edge。
If you want to set the background color only for focused multi-selects you can use this snippet:
如果您只想为聚焦的多选设置背景颜色，您可以使用以下代码段：
select[multiple]:focus option:checked {
background: red linear-gradient(0deg, red 0%, red 100%);
}
See the full demo here: http://codepen.io/marceltschopp/pen/PNyqKp
在此处查看完整演示：http: //codepen.io/marceltschopp/pen/PNyqKp
回答by BoltClock
::selectiondoesn't apply to selected options; it applies to highlighted text. Either you're misinterpreting their suggestions, or what they said is flat-out wrong.
::selection不适用于选定的选项；它适用于突出显示的文本。要么你误解了他们的建议，要么他们所说的完全错误。
According to this answer, you're supposed to be able to use option:checkedfor styling the selected items:
根据此答案，您应该能够option:checked用于设置所选项目的样式：
#dropdowns option:checked {
background: red;
}
But I haven't been able to get it to work for <select>or <select multiple>elements in this test fiddle.
但是我一直无法让它为这个 test fiddle 中的元素<select>或<select multiple>元素工作。
回答by mas-designs
The right CSS Selector for you would be :checked
适合您的 CSS 选择器是 :checked
::selection is only for text that has been highlighted:
::selection 仅适用于已突出显示的文本：
回答by Chris Hinshaw
I found this because I was having the same problem, I did find an odd solution that seems to work atleast with chrome and maybe others. The solution was to use an attribute selector. This seemed to work with chrome, I tested it in the js fiddle. A side note that the box did not immediately change color to background red but once I selected another option I could clearly see that it had indeed turned red. You can check it out in the jsfiddle listed above.
我发现这是因为我遇到了同样的问题，我确实找到了一个奇怪的解决方案，它似乎至少适用于 chrome 和其他人。解决方案是使用属性选择器。这似乎适用于 chrome，我在 js fiddle 中对其进行了测试。附带说明一下，该框并没有立即将颜色更改为背景红色，但是一旦我选择了另一个选项，我就可以清楚地看到它确实变成了红色。您可以在上面列出的 jsfiddle 中查看它。
#dropdowns option[selected] {
background: red;
}
