COLUMN コラム

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

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

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

選択サンプル１サンプル２サンプル３

2. 完成サンプル

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

選択サンプル１サンプル２サンプル３

3. コード紹介

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

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

<select name="sample" onchange="Color(this)" required>
 <option value="" disabled selected>選択</option>
 <option value="2">サンプル１</option>
 <option value="3">サンプル２</option>
 <option value="4">サンプル３</option>
</select>

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

select{
 color: grey;
}

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

function Color(sample){
 if( sample.value == 0 ){
  sample.style.color = '';
 }else{
  sample.style.color = 'red';
 }
}

おわりに

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

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