CSS 基于选定的 <option> 样式 <select> 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16344583/
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
Style <select> element based on selected <option>
提问by Aprillion
Is it possible to style a selectelement based on what optionis selected with CSS only? I am aware of existing JavaScript solutions.
是否可以仅select根据option使用 CSS 选择的内容来设置元素样式？我知道现有的JavaScript 解决方案。
I tried to style the option element itself, but this will give style only to the option element in the list of options, not to the selected element.
我试图为选项元素本身设置样式，但这只会为选项列表中的选项元素提供样式，而不是为所选元素提供样式。
select[name="qa_contact"] option[value="3"] {
background: orange;
}
http://jsfiddle.net/Aprillion/xSbhQ/
http://jsfiddle.net/Aprillion/xSbhQ/
If not possible with CSS 3, will CSS 4 subject selectorhelp in the future - or will this stay a forbidden fruit to CSS?
如果 CSS 3 无法实现，CSS 4 主题选择器将来会有所帮助吗？或者这将成为 CSS 的禁果？
采纳答案by Troy Alford
Unfortunately, yes - this is something not currently possible with only CSS. As mentioned in the answers and comments to this question, there is currently no way to make the parentelement receive styling based on its children.
不幸的是，是的 - 目前仅使用 CSS 无法实现这一点。正如对此问题的回答和评论中所述，目前无法让父元素根据其子元素接收样式。
In order to do what you're wanting, you would essentially have to detect which of the children(<option>) is selected, and then style the parent accordingly.
为了做您想做的事，您基本上必须检测选择了哪个子项( <option>)，然后相应地设置父项的样式。
You could, however, accomplish this with a very simple jQuery call, as follows:
但是，您可以通过一个非常简单的 jQuery 调用来完成此操作，如下所示：
HTML
HTML
<select>
<option value="foo">Foo!</option>
<option value="bar">Bar!</option>
</select>
jQuery
jQuery
var $select = $('select');
$select.each(function() {
$(this).addClass($(this).children(':selected').val());
}).on('change', function(ev) {
$(this).attr('class', '').addClass($(this).children(':selected').val());
});
CSS
CSS
select, option { background: #fff; }
select.foo, option[value="foo"] { background: red; }
select.bar, option[value="bar"] { background: green; }
Here is a working jsFiddle.
这是一个有效的 jsFiddle。
Back to the question about the future of selectors.Yes - the "Subject" selectors are intended to do exactly what you mention. If/when they ever actually go live in modern browsers, you could adapt the above code to:
回到关于选择器未来的问题。是的 - “主题”选择器旨在完全按照您提到的方式进行操作。如果/当它们真正在现代浏览器中上线时，您可以将上述代码调整为：
select { background: #fff; }
!select > option[value="foo"]:checked { background: red; }
!select > option[value="bar"]:checked { background: green; }
As a side-note, there is still debate about whether the !should go before or after the subject. This is based on the programming standard of !somethingmeaning "not something". As a result, the subject-based CSS might actually wind up looking like this instead:
作为旁注，关于 the!应该放在主题之前还是之后仍然存在争议。这是基于!something意义“不是东西”的编程标准。结果，基于主题的 CSS 实际上可能看起来像这样：
select { background: #fff; }
select! > option[value="foo"]:checked { background: red; }
select! > option[value="bar"]:checked { background: green; }
回答by dkellner
A minimalist solution
极简的解决方案
All we do here is make the select element aware of the current option. CSS can handle the rest. (Don't worry about the js one-liner, it has no dependencies, it's all working out of the box.)
我们在这里所做的就是让 select 元素知道当前选项。CSS 可以处理其余的。（不要担心 js 单行，它没有依赖关系，一切都是开箱即用的。）
<select onchange=" this.dataset.chosen = this.value; ">
...
...
</select>
And now you can easily target & style it:
现在您可以轻松定位和设置样式：
select[data-chosen='opt3'] {
border: 2px solid red;
}
See on CodePen.
请参阅CodePen。
Side note: "chosen" is no magic word, just a descriptive name - it could be "SantaClaus". It would also look better that way.
旁注：“选择”不是魔法词，只是一个描述性的名字——它可能是“圣诞老人”。这样看起来也会更好。
回答by Justin
So here is what I found on it being possible. The biggest issue is that after you have selected an element, the background color doesn't change because the select element isn't actually redrawn (seems more prevailant in IE - go figure). So even though you select a different option, that option isn't hightlighted in the list when you click the select element again.
所以这就是我发现它是可能的。最大的问题是，在您选择一个元素后，背景颜色不会改变，因为实际上并没有重新绘制选择元素（在 IE 中似乎更普遍 - 去图）。因此，即使您选择了不同的选项，当您再次单击选择元素时，该选项也不会在列表中突出显示。
To fix the redrawing issues in IE, it required changing the font-sizeby a minimal amount, +-.1. The other thing, which doesn't seem to be documented well, is that the pseudo class :checkeddoesalso work on select controls.
要修复 IE 中的重绘问题，它需要将 更改font-size为最小量，+-.1。其他的事情，这似乎并没有被记录良好，是伪类:checked确实还选择控制工作。
The fiddlerto show the added css that makes it possible.
显示添加的 css 使其成为可能的提琴手。
I only briefly played with it on Chrome and IE9, fyi.
我只是在 Chrome 和 IE9 上简单地玩过它，仅供参考。
EDIT: Obviously, you will need to set the [value="x"] to your desired value for specific option highlighting.
编辑：显然，您需要将 [value="x"] 设置为特定选项突出显示所需的值。
