Question

是否可以根据仅使用CSS选择的select来设置option元素的样式？我知道现有的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才能实现。正如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; }

Answer 2

极简解决方案

我们在这里所做的只是使select元素了解当前选项。 CSS可以处理其余的事情。（不必担心js的一线式，它没有依赖关系，它们都是开箱即用的。）

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

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

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

请参见CodePen。

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

Answer 3

所以这就是我在其上发现的可能。最大的问题是，在选择了一个元素之后，背景颜色不会改变，因为select元素实际上并没有被重绘（在IE中看起来更为流行 - 如图所示）。因此，即使您选择了其他选项，再次单击选择元素时，该选项也不会在列表中突出显示。

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

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

我只是简单地在Chrome和IE9上播放了它，fyi。

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

Answer 4

纯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>

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

4 个答案:

极简解决方案