如何更改隐藏<option>的文字颜色？

Question

我想更改隐藏选项的文本颜色。 隐藏选项应显示为占位符文本而不是可选选项。 我尝试将样式直接放在元素上，但这也不起作用。

有了这个 HTML / CSS，我期待“占位符”选项的文本是红色的。

select option[hidden] {
  color: red;
}

<select>
  <option value="" hidden selected style="color: red;">Numbers</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

Answer 1

hidden

元素是不可见的，所以你无法判断它是否真的在改变颜色。

也许你想改变

<select>

显示值的颜色？

select:invalid {
  color: red;
}

<select required>
  <option value="" hidden selected style="color: red;">Numbers</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>