Question

我有一个select元素，有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

您必须在CSS中定义select和option才能根据需要更改文本的颜色。

select {
    color: gray;
}

option {
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="selectname" name="selectname">
  <option value="V1" disabled selected>Text1</option>
  <option value="V2">Text2</option>
  <option value="V3">Text3</option>
  <option value="V4">Text4</option>
</select>

Answer 2

来自this答案。您应该通过不赋予占位符选项任何值来使其无效，并将select设置为required。

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

2 个答案: