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

Question

是否可以select根据optionCSS选择的内容设置元素的样式？我知道现有的JavaScript解决方案.

我试图设置选项元素本身的样式,但这只会给选项列表中的选项元素赋予样式,而不是选定元素.

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

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

如果用CSS 3不可能,CSS 4主题选择器将来会有所帮助 - 或者这会对CSS保持禁用吗？

Answer 1

不幸的是,是的 - 目前只有CSS才能实现.正如对此问题的答案和评论中所提到的,目前无法使父元素基于其子元素接收样式.

为了做你想要的,你基本上必须检测选择了哪个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; }

这是一个有效的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

如果有人在 Bootstrap 5 中寻找 select 的占位符，请将其添加到 SCSS 代码中（但请记住，只有没有值的选项才会被视为占位符文本）：

select:has(option[value=""]:checked) {
    color: $input-placeholder-color;
    opacity: 1;
}

Answer 3

极简方案

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

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

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

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

参见CodePen。

旁注：“选择”不是魔术词，只是一个描述性名称-可能是“乔史密斯”。

Answer 4

是的，到 2023 年，现在可以使用:has和 来实现这一点:checked。接受的和投票最高的答案已经过时了。

select:has(> option[value="3"]:checked) {
  background: orange;
}

<select>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

请注意，虽然:has主流浏览器都支持，但在 Firefox 中您仍然需要设置一个标志。