【Web制作】selectの表示を「選択してください」に変更する方法

コンタクトフォームで使われるselectの初期値を「選択してください」に変更する方法のご紹介です。

selectの表示を「選択してください」に変更する方法

結論としてはoptionタグの中にhidden属性を入れることです。

See the Pen customize-select by Takuma (@takushin0202) on CodePen.

これで「選択してください」が初期値として表示され、セレクトボックスを開いた後は選択ができないようになっています。

セレクトボックス内の文字サイズや色を変更する方法

初期値の「選択してください」を含め、セレクトボックス内の文字サイズや色を変更したい場合もあるかと思います。その際は必ずselectタグにcssを指定するようにして下さい。optionタグに指定してもcssは反映されないので要注意です。

See the Pen cusomize-select-size-and-color by Takuma (@takushin0202) on CodePen.

文字サイズやpaddingの調整も全部selectに指定してます。

ちなみにselectにデフォルトでついている下矢印をカスタマイズする方法はこちらの記事（現在執筆中）に書いてますので、必要に応じてご参照下さい。