selectタグのプルダウンのデフォルト項目を灰色に変更する方法 (HTML/CSSのみ)

HTML/CSS エンジニア
記事内に広告が含まれています。

 

はじめに

selectタグを用いたプルダウンを実装した場合、すべての項目が黒色になります。

しかし、下記のように、先頭のデフォルト項目だけ灰色にしたい場合もあるはずです。

この記事では、HTML/CSSのみでプルダウンのデフォルト項目の色を変更する方法をご紹介します。

See the Pen
select option by Shungo Matsumura (@shungo0525)
on CodePen.

selectタグの未選択のみ灰色にするコード

コピペでOK!!

## index.html

<style>
  select:invalid { color: #cdcdcd; } <!-- 先頭の項目の色 -->
  select option { color: black; } <!-- 通常の項目の色 -->
</style>

<select name="color" required>
  <option value="">色を選択して下さい</option>
  <option value="red">赤</option>
  <option value="blue">青</option>
  <option value="green">緑</option>
</select>

コード解説

下記の3点を満たしていないと未選択のoptionの色が変わらないので注意してください。

1. value=””

灰色にしたい項目のvalueを空にしておきます。

2. required

selectタグにrequiredを付けると、valueが空の項目が選択されている場合、invalid(= 無効)の状態になります。

そのため、「色を選択して下さい」という項目を選択を選択するとinvalidになります。

3. select:invalid

selectのoptionに黒色を適用して、

invalidの状態のoptionにだけ、灰色を適用すると、未選択の項目だけ灰色にすることができます！

 

styled-componentsの場合

実際に担当した案件ではstyled-componentsを使用していたので、

そのときの該当コードを下記に添付します。

 

/* Your code... */
const Component = () => {
  return (
    <Select required={true}>
      <option value="">選択してください</option>
      <option value="red">赤</option>
      <option value="blue">青</option>
      <option value="green">緑</option>
    </Select>
  )
}

constSelect = styled.select`
  option {
    color:black;
  }
  :invalid {
    color: #cdcdcd;
  }
`

コメント