html - 样式无效 <select> 使用 :invalid

Question

我有一个 <select> :

select:invalid {
  color: red;
}

<select required>
  <option disabled selected>- please choose -</option>
  <option value="1">A</option>
  <option value="2">B</option>
</select>

不幸的是，禁用的选择没有标记为红色。

有什么想法吗？

这不是我喜欢设置样式的选项，我喜欢设置选择的样式!

Answer 1

您需要为第一个选项指定 value=""。如果没有 value=""，选项的值隐式等于它的文本内容，这意味着它满足required 约束。

演示:

select:invalid { color: red; }

<select required>
  <option disabled value="" selected>- please choose -</option>
  <option value="1">A</option>
  <option value="2">B</option>
</select>

以上内容将使选择+所有选项变为红色，直到选择了一个值。

如果您希望选项始终为黑色，只需稍微扩展 CSS:

select:invalid { color: red; }
select option { color: black; }

<select required>
  <option disabled value="" selected>- please choose -</option>
  <option value="1">A</option>
  <option value="2">B</option>
</select>