样式< select>基于所选择的< option> [英] Style <select> element based on selected <option>

问题描述

是否可以根据仅使用CSS选择选项来样式化选择元素？我了解现有的 JavaScript解决方案。

我试图样式选项元素本身，但这将只给选项列表中的选项元素，而不是所选元素的样式。

  select [name =qa_contact] option [value =3] {
 background：orange; 
} 
  

http://jsfiddle.net/Aprillion/xSbhQ/

如果CSS 3无法使用，则 CSS 4主题选择器帮助未来 - 或者这将是CSS的禁用水果吗？

解决方案

不幸的是，这是目前不可能只与CSS。如此问题的答案和评论中所述，目前没有办法让父级

为了做你想做的事，你必须要检测哪个选择 （< option> ），然后为父母设置样式。

 < select> 
< option value =foo> Foo！< / option> 
< option value =bar>栏！< / option> 
< / select> 
  

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

  select，option {background：#fff; } 
 select.foo，option [value =foo] {background：red; } 
 select.bar，option [value =bar] {background：green; } 
  

这里是 working jsFiddle 。

返回有关选择器未来的问题。做你刚才提到的。如果/当他们实际上在现代浏览器中生活，您可以调整上述代码：

  select {background：#fff ; } 
！select> option [value =foo]：checked {background：red; } 
！select> option [value =bar]：checked {background：green; } 
  

另一方面，关于！ 应该在主题之前或之后。这是基于！something 意思是不是东西的编程标准。因此，基于主题的CSS可能实际上是这样的：

  select {background：#fff; } 
 select！ > option [value =foo]：checked {background：red; } 
 select！ > option [value =bar]：checked {background：green; } 
  

Is it possible to style a select element based on what option is selected with CSS only? I am aware of existing JavaScript solutions.

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/

If not possible with CSS 3, will CSS 4 subject selector help in the future - or will this stay a forbidden fruit to CSS?

解决方案

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 parent element receive styling based on its children.

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.

You could, however, accomplish this with a very simple jQuery call, as follows:

HTML

<select>
  <option value="foo">Foo!</option>
  <option value="bar">Bar!</option>
</select>

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

select, option { background: #fff; }
select.foo, option[value="foo"] { background: red; }
select.bar, option[value="bar"] { background: green; }

Here is a working 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 !something meaning "not something". As a result, the subject-based CSS might actually wind up looking like this instead:

select { background: #fff; }
select! > option[value="foo"]:checked { background: red; }
select! > option[value="bar"]:checked { background: green; }

这篇关于样式< select>基于所选择的< option>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！