风格<select>基于选定的元素<option>

是否可以根据仅用CSS选择option的元素来设计select元素？我知道现有的JavaScript solutions。风格<select>基于选定的元素<option>

我尝试设置选项元素本身的样式，但这只会给选项列表中的选项元素，而不是选定的元素。

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

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

如果无法与CSS 3，将在未来CSS 4 subject selector帮助 - 还是将留禁果的CSS？

来源

2013-05-02 Aprillion

我可以对你选择的awnser提出异议，敬请关注。这是非常“黑客” – Justin 2013-05-02 18:56:05

@Justin - 如果有更好的答案，我会改变接受的答案。但目前对我来说已经足够了。 – Aprillion 2013-05-02 19:14:34

看看我的anwser，让我知道它是否真的让你的问题大声笑。 – Justin 2013-05-02 20:05:50

不幸的是，这是目前只有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。

回到关于选择器未来的问题。是 - “主题”选择器旨在完成您提到的内容。如果/当他们曾经实际上在现代浏览器去住，你能适应上面的代码：

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

来源

2013-05-02 18:29:57

jQuery的一部分 - 它应该检查预选的选项以及onchange事件 – Aprillion 2013-05-02 19:23:37

是的，真的 - 我继续前进并更新它以添加该内容 – 2013-05-02 23:09:20

我已经修改了这个'select.foo，option [value =“foo”] {background：red;}'在jsFiddle中改变背景颜色，当value =“”这个'select.foo，选项[value =“”] {background：red;}'但它不起作用。当值为空时，背景颜色是什么？ – VansFannel 2016-06-14 11:24:08

所以这是我在这发现是可能。最大的问题是，选择一个元素后，背景颜色不会改变，因为select元素实际上没有重绘（在IE中似乎更具有可用性 - 请参阅图）。因此，即使您选择了其他选项，当您再次单击select元素时，该选项在列表中也不会突出显示。

要修复IE中的重画问题，它需要将font-size更改为最小量+ - 。1。另一件事似乎没有很好的证明，那就是伪类:checkeddoes也适用于选择控件。

fiddler显示添加的CSS，使它成为可能。

我只在Chrome和IE9上玩过它，fyi。

编辑：显然，您需要将[value =“x”]设置为所需的值，以便进行特定的选项突出显示。

来源

2013-05-02 19:58:48 Justin

这对IE和Chrome很有用。根本不适用于Firefox或Opera。 – Aprillion 2013-05-02 21:58:22

@deathApril我没有看歌剧，但它在Firefox中不工作实际上是[Firefox]（https://bugzilla.mozilla.org/show_bug.cgi?id=79107）中的一个错误。如果你看看应用的CSS，它实际上是在那里大声笑。在这种情况下，JavaScript将是必需的。 – Justin 2013-05-03 14:09:57

感谢您的错误链接，如果它自2001年以来不是固定的，我不相信在任何时候都能在Firefox中工作：（ – Aprillion 2013-05-03 14:38:54

风格<select>基于选定的元素<option>

回答

相关问题