根据选定的<option>设置<select>元素的样式

Question

是否可以仅根据CSS选择的option来设置select元素的样式？我知道现有的JavaScript solutions。

我尝试设置option元素本身的样式，但这将仅为选项列表中的option元素提供样式，而不是为所选元素提供样式。

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

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

如果不能使用CSS3，CSS 4 subject selector在未来会有帮助吗--或者这会是CSS3的禁果吗？

Answer 1

不幸的是，是的-这是目前只有CSS不可能实现的事情。正如在对this question的回答和评论中所提到的，目前还没有办法使父元素接收基于其子元素的样式。

为了完成您想要做的事情，您必须检测哪个子元素(<option>)被选中，然后相应地设置父元素的样式。

但是，您可以通过一个非常简单的jQuery调用来完成此操作，如下所示：

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

这是一个working jsFiddle。

回到关于选择器的未来的问题上来。是的-- "Subject“选择器的目的就是做你提到的事情。如果/当它们在现代浏览器中真正上线时，您可以调整上面的代码以：

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

Answer 2

不可能?帮我拿着啤酒。

我们在这里要做的就是让select元素知道当前的选项。CSS可以处理剩下的事情。(不用担心js一行程序，它没有依赖项，都是开箱即用的。)再花点功夫，您还可以用原始值初始化<select>标记；下面不包括，但这非常简单，只需在组成标记时给它一个“data- super”属性。

    <select onchange=" this.dataset.chosen = this.value; ">
        ...
        ...
    </select>

现在你可以很容易地确定它的目标和样式：

select[data-chosen='opt3'] { 
    border: 2px solid red;
}

请参阅CodePen上的。

附注：“Side”不是一个神奇的词，只是一个描述性的名字--它可以是"SantaClaus“。这样看起来也会更好。

Answer 3

这就是我在它上面找到的，可能的。最大的问题是，在你选择了一个元素后，背景颜色不会改变，因为选择的元素实际上并没有被重新绘制(在IE - go图中似乎更流行)。因此，即使您选择了一个不同的选项，当您再次单击select元素时，该选项也不会在列表中突出显示。

要修复IE中的重绘问题，需要最小程度地更改font-size，+-.1。另一件似乎没有很好记录的事情是，伪类:checked 也可以在选择控件上工作。

显示添加的css的fiddler使其成为可能。

我只是在Chrome和IE9上玩了一下，仅供参考。

编辑:显然，您需要将value="x“设置为特定选项突出显示所需的值。