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

しゅんご — Thu, 24 Nov 2022 10:42:26 +0000

はじめに
selectタグの未選択のみ灰色にするコード
1. コピペでOK!!
コード解説
styled-componentsの場合

はじめに

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

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

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

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

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

コピペでOK!!

## index.html

コード解説

下記の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;
  }
`

The post selectタグのプルダウンのデフォルト項目を灰色に変更する方法 (HTML/CSSのみ) first appeared on shungo blog.

select - shungo blog