基于选定的 <option> 样式 <select> 元素

Question

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

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

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

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

如果 CSS 3 无法实现，CSS 4 subject selector 会在未来提供帮助 - 还是这将成为 CSS 的禁果？

Answer 1

不可能？拿着我的啤酒。

我们在这里所做的只是让选择元素知道当前的选项。 CSS 可以处理其余部分。 （不用担心 js one-liner，它没有依赖关系，一切都是开箱即用的。）稍加努力，您还可以将 <select> 标记初始化为其原始值；不包括在下面，但它非常简单，只需在编写标记时给它一个“数据选择”属性。

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

现在您可以轻松定位和设置样式：

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

参见CodePen。

旁注：“选择”不是魔术词，只是一个描述性名称 - 它可能是“圣诞老人”。这样看起来也会更好。

Answer 2

纯 CSS 方法：-

如果你想在使用:valid选择器选择空值时应用样式，你可以设置它的样式，如下代码所示

如果所选值为空，则显示为红色

select > option {
  color: black;
  font-weight:initial;
}
select option[value=""] {
  color: red;
  font-weight:bold;
}
select[required]:invalid {
  color: red;
  font-weight:bold;
}

<select required name="fontSize">
<option value="">Please select</option>
<option value="9">9 px</option>
<option value="10">10 px</option>
<option value="11">11 px</option>
<option value="12">12 px</option>
<option value="13">13 px</option>
<option value="14">14 px</option>
<option value="15">15 px</option>
<option value="16">16 px</option>
</select>
<select required name="fontColor">
<option value="">Please select</option>
<option value="red" selected>Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>

Answer 3

很遗憾，是的 - 目前只有 CSS 无法实现这一点。正如this question 的答案和 cmets 中所提到的，目前没有办法让 parent 元素接收基于其 children 的样式。

为了做您想做的事，您基本上必须检测选择了哪个子代 (<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; }

Answer 4

这就是我发现的可能。最大的问题是，在您选择了一个元素后，背景颜色并没有改变，因为选择的元素实际上并没有被重绘（在 IE 中似乎更普遍——看图）。因此，即使您选择了不同的选项，当您再次单击选择元素时，该选项也不会在列表中突出显示。

要修复 IE 中的重绘问题，需要将 font-size 更改最小量，+-.1。另一件事似乎没有很好地记录，伪类:checked 确实也适用于选择控件。

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

我只是在 Chrome 和 IE9 上短暂使用过它，仅供参考。

编辑：显然，您需要将 [value="x"] 设置为您想要的值以突出显示特定选项。