检测是否 已经选择使用CSS

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>之外定位一个元素，可以通过操纵:valid css伪类以hacky方式完成。请注意，必须为required标记启用<select>属性才能注册为有效/无效。

例：

body {
  background-color: #fff;
}

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

<select required>
  <option value="" selected>Please select an option</option>
  <option>1</option>
  <option>2</option>
</select>
<label>Please select an option</label>

Answer 2

由于您的select元素没有multiple属性，因此无法在其中选择选项。 （是的，您的选项没有内容且没有值仍然是一个选项，可以选择，默认选中）。

如果确实如此，那么你想要的仍然是不可能的。 :checked属性将适用于<option>元素，但你不能用它来定位<select>，因为CSS has no parent selector。