HTMLのselectタグで「選択してださい」のようなプレースホルダーを表示する方法

今回はHTMLのselectタグで「選択してください」みたいなプレースホルダーを表示する方法を紹介します。

こんな感じのアレです↓

 

コード

以下のように書くとselectタグでプレースホルダーを表示することができます。

<select>
<option value='' disabled selected style='display:none;'>選択してください</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
</select>

 

解説

フォーム系のタグにはplaceholderという属性が用意されており、ここにテキストを表示することでユーザーに入力を促すことができますが、selectタグではplaceholder属性でテキストを表示することができません。

なので、まずは1つ目のoptionタグをプレースホルダーみたいにするために、「value=””」と記述します。

これを最初から選択されている状態にするため、selected属性を追加し、CSSのdisplay: none;を使って非表示にします。

これでプレースホルダーとして表示され、かつ選択肢には表示されないようにすることができます。