SELECTタグでプレースホルダー表示する方法

↓これをやるには


選択してください
A
B
C
D
E
F
G


↓こう書けばいいよ、という話です。

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

HTML5の機能のひとつplaceholderは、入力欄が未入力状態の時にうっすらテキストを表示して
入力を促すという便利なものです





↑こういう入力促進文字が、

<input type='text' placeholder='住所を入力してください' />
<textarea placeholder='詳細なご要望を入力してください'></textarea>

こんな簡単なタグ指定でできます。
ところが、SELECTタグだけはそれが効きません

↓こう書いても、無視されて

<select placeholder='選択してください'>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
</select>

↓こうなります

A
B
C
D
E
F
G



なので、一般にはデフォルト表示となる選択肢の一つ目をプレースホルダー扱いするように、
↓こう書くように指示される事が多いのですが、実際にやると

<select>
<option value=''>選択してください</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
</select>

↓こうなります。

選択してください
A
B
C
D
E
F
G


たしかに最初にプレースホルダーのように表示はされていますが、あくまで選択肢の1つなので、
それ自身も再度選ぶことができるのが気持ち悪いですよね。
それを解消するのが、記事冒頭で書いた記述方式なのです。

こんなテクニック使わなくても、単にplaceholder属性に書いておけばいいだけの日がいつかやってくるといいですね。