Question

我想为select元素着色（即突出显示为错误），但不是option标记。在FF中，我通过将样式应用于select元素并将另一种样式应用于option标记来实现此目的。以下是样式：

.highlight{
    background-color: #FB6F6E;
}

.highlight > option{
    background: #dfdfdf;
}

这看起来像我想要的FF（16.0.1），

enter image description here

但在IE8（怪癖模式）中，所有选项都是彩色的：

enter image description here

那么有没有办法在IE8中实现这一目标？

编辑我最好使用不涉及为option标签提供课程或使用javascript的内容。我知道这些解决方案有效，但感觉有点像黑客。也许DOCTYPE问题解决了这个问题，我只是想知道添加DOCTYPE是否会改变当前的设计。

编辑正如你们中的一些人建议的那样，我添加了一个DOCTYPE（HTML 4.01 Transitional）。 IE8仍处于怪异模式，但选择框的呈现方式略有不同：

enter image description here

选择的边框为红色，但仍不是整个选择框。有什么想法吗？

Answer 1

尝试一下：

.highlight option, .highlight:focus option {
    background: #dfdfdf;
}

Answer 2

Works（ish）如果你对选项应用不同的类，就像这样......

<html>
<body>
    <select class="highlight">
        <option>Please select...</option>
        <option class="nohighlight">One</option>
        <option class="nohighlight">Two</option>
        <option class="nohighlight">Three</option>
    </select>
</body>
</html>

http://jsfiddle.net/vXFZe

Answer 3

我花了一些时间进行实验，我想出了这个：

$('.highlight').on('click', 'option', function() {

    $(this).css('background-color', 'tomato').siblings().css('background-color', 'white');

});

基本上，您使用javascript将背景颜色强制显示在选定的<option>上。我看到的唯一工件是选定的<option>也会在列表中显示红色。我更喜欢所有的CSS解决方案，但这适用于IE。

Answer 4

不幸的是我找不到解决方案（不使用javascript）来解决这个问题。客户端原样接受了选择框。

Css选择器仅用于<select>元素而没有<option>标签IE8 </option> </select>

4 个答案: