html - 修改选择，只有第一个是灰色的

Question

我有一个 select 元素并使用第一个 option 作为选择字段的标题。我想知道是否有一种方法可以在选择第一个选项时使 select 字段内的文本变灰。这只能在 JS 中完成，还是有 CSS 解决方案？

我曾尝试更改第一个 选项 的样式，但这只会在我激活下拉菜单时更改文本的颜色。

<select>
  <option>Please select your favourite fruit</option>
  <option>Apple</option>
  <option>Banana</option>
</select>

Answer 1

这是一个更现代的解决方案，因此它不是特定于第一个选项，而是一个无效选项并且不需要 JS 仅将标题/占位符选项显示为灰色，而其余选项显示正常。

select,
select option {
  color: #000000;
}

select:invalid,
select option[value=""] {
  color: #999999;
}

label {
  display: block;
  margin: 16px 0;
}

/*Added for browser compatibility*/
[hidden] {
  display: none;
}

<label>
    Invalid option cannot be selected and is hidden from the user in the dropdown.
    <select required>
      <option value="" selected disabled hidden>Please select your favourite fruit</option>
      <option>Apple</option>
      <option>Banana</option>
    </select>
</label>

<label>
    Invalid option cannot be selected, but is not hidden from the user in the dropdown.
    <select required>
      <option value="" selected disabled>Please select your favourite fruit</option>
      <option>Apple</option>
      <option>Banana</option>
    </select>
</label>

<label>
    Invalid option can be selected and is not hidden from the user in the dropdown.
    <select required>
      <option value="" selected>Please select your favourite fruit</option>
      <option>Apple</option>
      <option>Banana</option>
    </select>
</label>

select 上的 :invalid 选择器只对一个选项起作用如果需要选择框并且所选选项的值为空，因此您可以像文本框的占位符文本一样设置它的样式。

将其设置为 disabled 可防止用户在 select 的选项中选择它，并将其设置为 hidden 可从选择的选项中隐藏它。

这是我的 CodePen demo探索其他选择框样式并在浅色背景上显示此样式。