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 Specs：

  

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

     

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

     

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

^{重点是我的}

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

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

• 通过选择，您的意思是检查是否已选择有效值而不是任何选择。
• 无效或空值（在本例中为“选择小部件...”）有value=""，是select元素下的第一个选项
• 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中得到验证。