<select>に<hr>で区切り線を付ける

いままでWebでは<select>内に区切り線を入れることができず、代替手段として<optgroup>が使われていたが、HTMLの仕様としてselect要素にhr要素を含められるようになった。

※2024-01-31現在、Firefox122がサポートしたことで全主要ブラウザで利用可能

Before

<select>
  <optgroup>
    <option>Abount</option>
    <option>Check for Updates...</option>
  </optgroup>
  <optgroup>
    <option>Preferences...</option>
  </optgroup>
</select>

After

<select>
  <option>Abount</option>
  <option>Check for Updates...</option>
  <hr>
  <option>Preferences...</option>
</select>

デモ