HTMLのセレクトボックスで「選択できない初期値として『選択してください』と表示させたい」ことがよくありますが、ついつい忘れがちなのでやり方を紹介します。
HTMLのselectで初期値を「選択してください」にする方法
やり方はhidden属性を入れる。たったこれだけです。
See the Pen
dypzZJV by wagashi000327 (@wagashi000327)
on CodePen.
「選択してください」の<option>タグにhiddenを入れる。これだけで選択できない初期値が設定できます。
disabledやselected属性など色々合わせて設定するやる方法もあるのですが、無駄に手間なのでhiddenで一発でやるのがいいです。
なお、「選択してください」の<option>タグにvalueは不要です。
初期値の「選択してください」の色を変える方法は？
「『選択してください』の色だけグレーにしたい」みたいな場合はCSSで<select>にスタイルを指定すればokです。
See the Pen
QWKMOrX by wagashi000327 (@wagashi000327)
on CodePen.
注意しておきたいのはCSSは<select>に当てるのであって、<option>に当てるわけではないということです。
「『選択してください』は<option>だからoptionにCSS当てればいいのかな？」みたいに僕も最初は思いましたが、実際はoptionにスタイルを当てても何もおきません。スタイルを当てるのは<select>なので気をつけてくださいね。
まとめ
セレクトボックスの初期値として「選択してください」と表示させる機会はWeb制作をやっていると結構あると思います。
使う機会も割と多いので知っておくと便利ですね。
