COLUMNコラム

セレクトボックスの初期値の色を変える方法

 

inputタグであれば「選択してください」の文字色を変えたいときcssで簡単に色を変更できます。
しかし、セレクトボックスはcssで色の変更をすることができず、プレースホルダーを設定することもできません。そこで今回はセレクトボックスの初期値の色を変える方法をご紹介します。
とても簡単に変えることができるので、ぜひ試してみて下さい。

1. セレクトボックスとは

ボックスをクリックすると選択項目が複数出てくるフォームタグの一種です。

2. 完成サンプル

「選択」の文字は実際に選択肢に入ってないので、グレー色にします。
サンプル1を選択した際は、赤色で表示されます。

 

3. コード紹介

3-1. htmlファイルを用意する

重要なポイントは、selectタグにonchange属性をつけることです。onchange属性はselect要素の属性が変わったときに起動します。

3-2. CSSファイルを用意する

ページをひらいたときの最初の色を指定します。

 

3-3. JavaScriptファイルを用意する

onchangeで属性が変わった際にvalueが0以外は文字色がredになるように指定します。

 

おわりに

今回はセレクトボックスの初期値の色を変える方法を紹介しました。
細かい所ですが、ユーザビリティに直結する大事な部分です。
htmlcssだけでは修正できず少し面倒ではありますが、やり方さえ分かってしまえば簡単に変更することが可能なので、この記事を参考に少しでも業務の役に立てていただけたら幸いです。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。webサイトについてお悩みのある方はお気軽にお問い合わせください。

DOLに制作を相談する