使用 CSS 检测 <select> 中是否选择了 <option>

Question

我input:not(:placeholder-shown)用来确定一个值是否在输入字段中。

是否有一些 CSS 方法可以检查元素中是否<option />选择了一个<select>元素？

如果选择了一个选项，我想在选择下拉列表之后立即设置标签标签的样式。

下面是一个例子：

<select class="form-control">
    <option></option>
    <option value="1">One</option>
</select>
<label>Pick One</label>

如果选择了一个选项（带有值），这是我想用来操作的 CSS。

select.form-control:checked ~ label{
  color: red;
}

Answer 1

是的，:checked伪类也针对<option>标签。

例子：

option:checked { display:none; }

来源：

http://www.w3.org/TR/selectors/#checked

编辑：

如果你想针对一个元素之外你的<select>，它可以在哈克的方式通过操纵完成的:validCSS伪类。请注意，required必须启用该属性才能将<select>标记注册为有效/无效。

例子：

option:checked { display:none; }

body {
  background-color: #fff;
}

select:valid ~ label {
  background-color: red;
}