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

HTML5 JavaScript

2021.03.10

【JavaScript】selectの初期値の文字色を変える方法

お問い合わせフォームなどでいくつかの項目からユーザーに選択してもらう時、セレクトボックスを使用することがあると思います。
本日は、このセレクトボックスの初期値の文字色の変え方をご説明したいと思います。

selectの基本

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

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

一番目のoptionの値が初期値として表示され、クリックすることで他の選択肢を選択することができます。
▼参考
https://developer.mozilla.org/ja/docs/Web/HTML/Element/select

うまくいかない例

フォームなどで使用する際は、他のinputなどの要素と並べて使用することが良くあります。
inputの初期値(placefolderの値)については、::placeholderの擬似要素を用いることで文字の色を変えることができます。

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

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

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

「初期値の文字色」だけを変更することは難しそうなので、【初期値が選択されている時のselectの文字色】と【初期値以外が選択されているときのselectの文字色】を変更することで対応します。

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

追記するのは2つです。

まず、selectに以下を追記します。

onchange="changeColor(this)"

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

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

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

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

こちらの記事もおすすめ

0

関連記事

  • 2021.04.13

    【HTML5】strongタグとWordPressテーマ作成時の注意事項

    HTML5

  • 2021.04.06

    【jQuery】全画面表示のナビゲーションメニューを実装する

    JavaScript

  • 2021.04.05

    【jQuery】jQueryのみでPC/SPの画像を切り替える方法

    JavaScript

おすすめ記事

  • 2019.03.15

    【WordPress】固定ページにページネーションを効かせる方法

    WordPress

  • 2021.02.06

    【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

    CSS

    HTML5

  • 2020.12.02

    【css】スマホでパンくずを横スクロールさせる方法

    CSS

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!