所选元素的 CSS 选择器，除非它为空<select>

Question

我想为未选择“请选择”的情况设计一个

<select>

。

例如

select{
color: gray;
}

select:not-empty{
color: blue;
}

HTML：

<select>
  <option value="">Empty, please gray</option>
  <option value="something">If selected, select in blue</option>
  <option value="something2">If selected, select in blue</option>
</select>

所以如果选项值为空 -> 灰色

选项值不为空 -> 蓝色

代码笔：

https://codepen.io/jossnaz/pen/dLxezv

我想要什么？ 这个：

Answer 1

HTML5 的验证可以帮助您。具体来说，您需要将

select

 设为必填。然后使用 

:valid

 伪类进行样式设置。

请记住，value=""

（未定义）无效。任何字符串都是有效的，因此您可以利用它来发挥自己的优势。

这是一个例子：

select {
  font-size: 14px;
  color: #ccc;
  padding: 5px 10px;
}
select:focus {
  outline: 0 none;
}

select:valid {
  color: blue;
}

<select required>
<option value="">Empty value isn't valid</option>
<option value="1">Valid option</option>
<option value="2">Another valid option</option>
</select>

Answer 2

2024 年更新

您现在可以使用

select:has( option[value=""]:checked )

 例如。样式选择，默认为空值作为灰色占位符等...