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.07.20

    画面遷移時にページ全体をフェードさせる方法

    CSS

    JavaScript

  • 2021.07.10

    HTMLのコメントアウトの書き方と注意点【初心者向け】

    HTML5

  • 2021.06.02

    【IEバグ】flex-direction: column;を指定した時に画像の下に余白ができるバグ解消【CSS1行……

    CSS

    HTML5

おすすめ記事

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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