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

お問い合わせフォームなどでよく見るセレクトボックス。

選択前は「選択してください」とグレーなど薄めの色で表示しておき、項目が選択されたら黒色に変更したい！と思ってCSSで色指定をしたものの、うまくいかない・・・ということはないでしょうか？

本日は、このセレクトボックスの初期値の文字色の変え方をご説明したいと思います。

セレクトボックスとは

セレクトボックスとは、フォームなどでよく見かけるこちらのような見た目のものです。

いくつかの選択肢から1つを選択するときに使うものです。
複数の選択肢から1つを選ぶという特徴は、ラジオボタンと似ていますが、ラジオボタンは選択肢が全て見える状態になっているのに対し、セレクトボックスでは選択肢が隠れています。

セレクトボックスの作り方

selectとoptionを用いることで、下記のようなセレクトボックスを作ることができます。

See the Pen ExNdxZo by spiqa design (@spiqa_design) on CodePen.

▼参考
https://developer.mozilla.org/ja/docs/Web/HTML/Element/select

▼セレクトボックスの作り方はこちら

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

セレクトボックスの初期値を表示する

input要素の初期値はplaceholderで設定できますが、セレクトボックスの初期値はplaceholderで設定できません。

See the Pen by spiqa design (@spiqa_design) on CodePen.

上の例で「所属部署」というプレースホルダーを設定していますが、セレクトボックスの初期値は「営業部」となってしまっています。

セレクトボックスは、optionの1つ目の要素が初期値になります。そのため、初期値を設定したい場合は、optionの1つ目にその内容を記述します。

See the Pen by spiqa design (@spiqa_design) on CodePen.

初期値の位置を変更する

セレクトボックスの初期値は、デフォルトではoptionの1つ目ですが、場合によっては、真ん中のものを初期値にしたい場合もありますね。selected属性を追加するだけで好きな選択肢を初期値にすることができます！

See the Pen by spiqa design (@spiqa_design) on CodePen.

初期値の文字色を変える方法

optionにCSSは効かない

See the Pen WNoaNjr by spiqa design (@spiqa_design) on CodePen.

inputの初期値（プレースホルダー）は::placeholderの擬似要素を用いることで文字色を変えることができます。

ただ上記の通り、selectの初期値については.grayの指定もoption:first-childの指定も効いていません。これは、optionにcssを設定することができないためです。

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

セレクトボックスの「初期値の文字色」をCSSだけで変更することは難しいので、【初期値が選択されている時のselectの文字色】と【初期値以外が選択されているときのselectの文字色】を変更することで対応します。

See the Pen select by spiqa design (@spiqa_design) on CodePen.

追記するのは２つです。

まず、selectにonchange="changeColor(this)"を追記します。

<select name="example" onchange="changeColor(this)">
　〜（省略）〜
</select>

次にJavaScriptとして、以下を記述します。

function changeColor(hoge){
    if( hoge.value == 0 ){
        hoge.style.color = '';
    }else{
        hoge.style.color = 'blue';
    }
}

初期値と違う選択肢が選択されたら色を変えるという指定なので、cssでは初期値の色（今回はグレー）、JavaScriptでは、選択後の色（今回は青色）を指定してください。

セレクトボックスの初期値の文字色にもこだわることで、統一感のあるフォームを作成することができますので、ぜひ活用してみてください！

セレクトボックスの作り方はこちらの記事で解説！

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

テキストボックスが変更されたら〜など他の指定はこちらの記事で解説！

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

セレクトボックスの矢印を好きなものにする方法は、こちらの記事で解説！

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