CSS伪选择器类似于:valid或:选中select标签？

Question

我正在尝试找到一种非JavaScript方式来select标记标记,如果它具有已选择的值.

例如,如果我有以下标记:

<select>
  <option value="">Select a widget...</option>
  <option value="1">Widget 1</option>
</select>

是否有一个CSS选择器,我可以用来判断该select标签的值何时为空？

Answer 1

根据HTML5 规范：

该要求的属性是一个布尔属性。指定后，用户将需要在提交表单之前选择一个值。

约束验证：如果元素指定了它的required 属性，并且 select 元素的选项列表中的 option 元素的选择度都没有设置为 true，或者select 元素的选项列表中的唯一一个 option元素的选择度设置为true 是占位符标签选项，则该元素会丢失。

如果select 元素的选项列表（如果有）中第一个 option元素的值是空字符串，并且该 option 元素的父节点是 select 元素（而不是 optgroup 元素），则该选项是select 元素的占位符标签选项。

^{重点是我的}

上面的语句意味着只有当用户选择一个值时，select具有required属性的元素才会成为。在此之前，它将继续处于状态。validinvalid

的:valid，:invalid伪选择可以自己帮助的风格select取决于值是否已经元素选择或没有，但它取决于几个因素。它们如下：

• 通过selected，您的意思是检查是否选择了有效值，而不仅仅是任何选择。
• 该无效或空值（在这种情况下，“选择一个小部件...”）拥有value=""，是选择元素下的第一个选项。
• 该select元素是一个强制性元素 - 意思是，我们可以required向它添加属性。

根据您的问题陈述，我认为您的方案满足上述所有因素。

select {
  border: 2px solid blue;
  outline: none;
}
select:valid {
  border: 2px solid green;
  outline: none;
}

<select required>
  <option value="">Select a widget...</option>
  <option value="1">Widget 1</option>
</select>

上述代码段已在 IE10+（包括 Edge）、Chrome、Opera 和 Firefox 中得到验证。