selectで初期値を選択できないようにする

フォームでselectを選択する際、「選択してください」のような初期値を選択できないようにする実装をしているサイトを見かけたので、実装方法をメモ。

サンプルコード

初期値のoptionにhidden属性を設定すればいいようです。

<select>
  <option hidden>選択してください</option>
  <option>紗倉ひびき</option>
  <option>奏流院朱美</option>
  <option>上原彩也香</option>
  <option>ジーナ・ボイド</option>
</select>

hiddenを設定することで要素が非表示になるのは知っていましたが、optionに設定した場合は選択前の初期値としては表示され、選択中には項目内に表示されなくなるようです。
hiddenを設定するデモページ

各ブラウザで確認してみて、chromeとFirefox、edgeでは初期値を選択できないようにできましたが、IEとSafariでは選択項目に表示されてしまっていました。
また、スマホの場合はAndroidは表示されていませんでしたが、iOSのSafari,chromeでは選択項目に表示されていました。

ただ表示されてしまうことに大きな問題があるわけでもないので、対応している環境向けに設定しておくのはいいかもしれません。