如何更改选择或占位符的第一个值？

Question

我在这里有一个选择：

<select name="" id="">
 <option disabled hidden selected value="">
  default
 </option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="3">3</option>
</select>

我正在尝试将占位符或第一个值设置为不同的颜色，使其看起来像占位符。我尝试过这样做：

select option:disabled { color: red; }
select :invalid { color: red; }
select option:first-child { color: red; }
select { color: grey; } option:first-child { color: red;}

这些都不起作用，所以我有点卡住了。我真的不想使用诸如使颜色透明并在选择顶部放置标签之类的技巧。

Answer 1

引用this answer，您实际上无法按照操作系统呈现的样式设置它。

但是幸运的是，在您的情况下，您可以将属性 disabled 添加到占位符值中：它将在列表中显示为灰色并且无法选择，这将阻止您的用户发送带有占位符值的表单，无需任何验证！

您可以在 this fiddle 中看到它的运行情况以对其进行测试（还可以看到一堆规则已应用于 option 元素，但它们都不起作用）。