样式元件基于所选(Style <select> element based on s

是否有可能风格select基于什么元素option仅与CSS选择？我知道现有的JavaScript的解决方案。

我试图样式选项元素本身，但这只会给选项元素赋予样式选项列表，而不是选定的元素。

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

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

如果无法与CSS 3，将CSS 4主题选择帮助在未来的-还是将留禁果的CSS？

Answer 1:

可惜的是 - 这是后话目前无法只用CSS。正如答案和意见中提到这个问题，目前还没有办法使父元素基于它的孩子接受的造型。

为了做到你想要什么，你就基本上具备检测该儿童（ <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; }

这里是一个工作的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; }

Answer 2:

所以这是我在其中可以找到。最大的问题是，你选择了一个元素之后，背景颜色不会改变，因为选择的元素实际上没有重绘（在IE似乎更prevailant - 去图）。因此，即使您选择不同的选项，该选项不在列表中，当您再次单击选择元素在突出显示。

以固定在IE重绘的问题，它需要改变font-size由最小量，+ - 。1。其他的事情，这似乎并没有被记录良好，是伪类:checked 不还选择控制工作。

该提琴手以显示添加CSS，使之成为可能。

我与它只有短暂效力于Chrome和IE9，仅供参考。

编辑：显然，你需要将[值=“X”]设置为特定的选项高亮显示您所需的值。

文章来源: Style