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

selectタグは、ドロップダウンリストを作成するためのタグですが、見た目に工夫を加えることでユーザーエクスペリエンスを向上させることができます。

メニューバーなどで使われている区切り線を、select要素の子要素としてhrタグを含めることでwebでも表現できるようになりました。

現時点で
・Safari 17
・Chrome 119
にて実装されています。

index.html

<select>
 <option>テスト</option>
 <option>テスト</option>
 <hr>
 <option>テスト</option>
 <option>テスト</option>
</select>