Question

我使用input：not（：placeholder-shown）来确定一个值是否在输入字段中。有什么CSS方法可以检查是否在选择一个如果选择了一个选项（带有值），这是我要使用的CSS。 select.form-control：选中〜标签{ 红色; }

Answer 1

是的，:checked伪类也以<option>标签为目标。

示例：

option:checked { display:none; }

来源：

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

编辑：

如果您要定位<select>外部元素，则可以通过操纵:valid css伪类以一种怪诞的方式来实现。请注意，必须启用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。

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

2 个答案: