CSS 伪选择器类似于 :valid 或 :check for select tags

Question

如果select标签具有已选择的值，我正在尝试找到一种非JavaScript的方式来设置其样式。

例如，如果我有以下标签：

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

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

Answer 1

根据 HTML5 规范：

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

约束验证：如果元素指定了其必需属性，并且选择元素的选项列表中的选项元素都没有将其选择性设置为 true，或者选择元素的选项列表中其选择性设置为 true 的唯一选项元素是占位符标签选项，则元素丢失。

如果选择元素

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

^{强调是我的}

上述语句暗示，只有当用户选择值时，具有required属性的select元素才会变得valid。在此之前，它将继续处于invalid状态。

---

:valid，:invalid伪选择器本身可以帮助设置select元素的样式，这取决于是否选择了值，但这取决于几个因素。它们如下：

• 选择的意思是检查是否选择了有效值，而不仅仅是任何选择。
• 无效或空的值（在本例中为"选择小部件..."）具有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中进行了验证。