仅适用于没有 <option> 标记的 <select> 元素的 CSS 选择器 IE8答案

【问题标题】：Css selector for only the <select> element without its <option> tags IE8仅适用于没有 <option> 标记的 <select> 元素的 CSS 选择器 IE8
【发布时间】：2012-10-23 16:28:59
【问题描述】：

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

.highlight{
    background-color: #FB6F6E;
}

.highlight > option{
    background: #dfdfdf;
}

这在 FF (16.0.1) 中看起来如我所愿，

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

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

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

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

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

【问题讨论】：

@Clyde Lobo：不，我没有使用 DOCTYPE。
那么你需要开始使用一个DOCTYPE。它使 IE 的行为更具可预测性。
在这种情况下，不可能。您必须强制它进入标准模式才能使其工作。
@Robert K：但是我需要检查我的所有页面以正确呈现。由于一切都已完成以在怪癖模式下工作。还是不需要检查/测试？
它使浏览器尽可能接近标准地呈现网页。这确保了不同浏览器之间的更高一致性。如果 IE 呈现的东西与其他浏览器非常不同，这通常是怪癖模式的结果。

标签： html css firefox internet-explorer-8 css-selectors

【解决方案1】：

如果您将不同的类应用于选项，则可以工作（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

【讨论】：

谢谢，我知道这一点，但我不想在整个项目中重写我所有的选择框。
您可以使用 javascript / JQuery 应用该类吗？
是的，确实如此，但这对于页面上的几个选择框来说是相当大的开销，每个选择框都有 300 个选项......每次重新加载页面时都会执行。

【解决方案2】：

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

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

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

});

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

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：

不幸的是，这个解决方案不起作用。整个选择框变成灰色，因为它没有突出显示。
@Atticus: :focus 在怪癖模式下不受支持。

【解决方案4】：

很遗憾，我找不到解决此问题的解决方案（不使用 javascript）。客户端按原样接受选择框。

【讨论】：