html - 如何将所选选项颜色与禁用选项分开设置样式

Question

我有一个 HTML 下拉选择菜单，其中第一个选项被禁用。我想以灰色显示默认禁用选项，但是一旦我选择了另一个值，我希望它显示为蓝色。我怎样才能做到这一点？

我设法让选定的选项在列表中显示为灰色，而可选择的选项在列表中显示为蓝色。但是，一旦选择了禁用选项和未禁用选项，它们无论如何都会显示为灰色:

select:not(:checked) {
  color: gray;
}
select option:not(:disabled){
  color: #000098;
}

Answer 1

如果您将所需的标签放在选择元素中，就可以做到这一点。

HTML:

<select name="number" required>
  <option value="" disabled selected hidden>Placeholder</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

CSS:

select:required:invalid {
  color: gray;
}
select, option {
  color: blue;
}

https://jsfiddle.net/p63eg7d8/