设置选择选项占位符的字体颜色

Question

正在寻找设置下拉列表占位符的字体颜色的方法。当需要select id时,以下操作起作用：

select:required:invalid {
    color: #9e9e9e;
}

但是，我不希望输入需要这些下拉列表。一旦我移除所需的标记，占位符字体就会变回黑色。

以下是我的下拉列表：

<select id="searchresults4" name="primarysport">
    <option value="">Choose Primary Sport...</option>
    <option>Football</option>
    <option>Basketball</option>
    <option>Baseball</option>
    <option>Softball</option>
    <option>Soccer</option>
    <option>Golf</option>
</select>

Answer 1

要直接处理option字体颜色，我们可以将select元素上的颜色设置为浅灰色，然后将所有option字体颜色设置为黑色（第一种除外）。

这样，第一个选项继承浅灰色，并且在选择打开和关闭时显示为浅灰色。

null

css lang-css prettyprint-override">select {
  color: #9e9e9e;
}
option:not(:first-of-type) {
  color: black;
}

<select id="searchresults4" name="primarysport">
  <option value="">Choose Primary Sport...</option>
  <option>Football</option>
  <option>Basketball</option>
  <option>Baseball</option>
  <option>Softball</option>
  <option>Soccer</option>
  <option>Golf</option>
</select>