【HTML】selectで初期値を「選択してください」にする方法

【HTML】selectで初期値を「選択してください」にする方法 HTML

HTMLのセレクトボックスで「選択できない初期値として『選択してください』と表示させたい」ことがよくありますが、ついつい忘れがちなのでやり方を紹介します。

 

スポンサーリンク

HTMLのselectで初期値を「選択してください」にする方法

やり方はhidden属性を入れる。たったこれだけです。

See the Pen
dypzZJV
by wagashi000327 (@wagashi000327)
on CodePen.

「選択してください」の<option>タグにhiddenを入れる。これだけで選択できない初期値が設定できます。

disabledselected属性など色々合わせて設定するやる方法もあるのですが、無駄に手間なのでhiddenで一発でやるのがいいです。

なお、「選択してください」の<option>タグにvalueは不要です。

 

初期値の「選択してください」の色を変える方法は?

「『選択してください』の色だけグレーにしたい」みたいな場合はCSSで<select>にスタイルを指定すればokです。

See the Pen
QWKMOrX
by wagashi000327 (@wagashi000327)
on CodePen.

注意しておきたいのはCSSは<select>に当てるのであって、<option>に当てるわけではないということです。

「『選択してください』は<option>だからoptionにCSS当てればいいのかな?」みたいに僕も最初は思いましたが、実際はoptionにスタイルを当てても何もおきません。スタイルを当てるのは<select>なので気をつけてくださいね。

 

まとめ

セレクトボックスの初期値として「選択してください」と表示させる機会はWeb制作をやっていると結構あると思います。

使う機会も割と多いので知っておくと便利ですね。