html - 更改 <select> 元素中所选选项的文本颜色

Question

我有一个带有 4 个选项的选择元素，如下所示:

<select name="selectname">
     <option value="V1" disabled selected hidden>Text1</option>
     <option value="V2">Text2</option>
     <option value="V3">Text3</option>
     <option value="V4">Text4</option>
</select>

我希望所选选项的文本颜色显示为灰色(在选择框中，让它看起来像一个占位符)。为此，我使用以下 CSS:

<style>
     select:disabled {color: gray; }
</style>

但是选中选项的文字颜色显示为黑色(标准色)。

我尝试在我的 css 中使用不同的属性，但这并不奏效。

select:selected {color: gray; }
select:hidden {color: gray; }
select:invalid {color: gray; }

我试过使用不同的关键字:

select:disabled {textcolor: gray; }

Answer 1

取自this回答。您应该使占位符选项无效，方法是不给它任何值并将选择设置为必需。