selectの未選択状態にスタイルを設定する

selectの未選択状態に、placeholderのようなスタイルを設定したいということがあったので、検討した実装方法をメモしておきます。

サンプルコード

まず最初の方法は、requiredと:invalid、:validを使う方法です。
select要素にrequired属性を付与します。

<select class="custom-select" required>
  <option value="">選択してください</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

CSSの:invalidと:validを使って、値を選択しているか判別します。

.custom-select:invalid {
  color: red;
}
.custom-select:valid {
  color: black;
}
.custom-select option {
  color: black;
}

:invalidの設定のみだと、Windows環境では以下のようにドロップダウン表示時にも文字色が変わってしまうので、option要素にも通常の文字色を設定しています。

これで想定した表示にすることができました。
select未選択時のスタイルのデモページ
ただこの方法だと、selectが必須でない場合は誤った設定をしていることになってしまいます。

別の方法として、valueの値が空のoptionを選択している場合にスタイルを設定するようにしてみます。

<select class="custom-select">
  <option value="">選択してください</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

:has()を使って、valueが空のoptionを選択している場合に文字色を設定します。

.custom-select:has(option[value=""]:checked) {
  color: red;
}
.custom-select option {
  color: black;
}

先ほどと同様に、Windows環境のドロップダウンの対応としてoption要素に通常の文字色を設定しています。
select未選択時のスタイルのデモページ2