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

【问题标题】：Detecting if an <option> has been selected in <select> using CSS使用 CSS 检测是否在 <select> 中选择了 <option>
【发布时间】：2019-07-31 18:43:42
【问题描述】：

我使用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;
}

【问题讨论】：

您的选择下拉菜单是什么样的？默认选择第一个<option>
如果选择了一个选项，我想在选择下拉菜单之后立即设置标签标签的样式。选择一个

标签： html css css-selectors

【解决方案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>

【讨论】：

我的目标是在选择标签之后将样式应用于标签。有没有办法使用它来做到这一点？选择一个
使用您正在讨论的代码编辑您的问题，我会尝试编辑我的问题以获得更准确的答案
我已经编辑了原始问题并尝试了您的建议，但没有奏效。
感谢您指出这一点。只要选择字段是必需的，这将起作用。对于可选的选择标签，似乎没有办法。

【解决方案2】：

由于您的select 元素没有multiple 属性，因此不可能在其中不选择选项。（是的，你的无内容无值的选项依然是选项，可以选中，默认选中）。

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

【讨论】：