地味だけど嬉しい新機能！ フォームのセレクトボックスで区切り線にhrを使用できるようになりました

先日リリースされたChrome 119に地味だけど嬉しい新機能が実装されていたので、紹介します。

フォームのセレクトボックスで区切り線にhrを使用できるようになりました。すでにSafariでもサポートされており、これでChorme, Edgeでも使用できます。

Select element: now with horizontal rules
by Una Kravets

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。

• select要素内で区切り線（hr）を使用できるようになりました
• select要素内の区切り線（hr）の実装方法
• select要素内の区切り線（hr）のデモ

select要素内で区切り線（hr）を使用できるようになりました

11/1にリリースされたChrome 119では、小さいながらも強力なアップグレードがありました。

フォームのselect要素内のoptionのリスト間に、区切り線としてhr要素を使用できます。これはユーザーエクスペリエンスを向上させることを目的にリストを視覚的に分割することができます。

左: ビフォー、右: Chrome 119+

セレクトボックスでの区切り線（hr）はSafari 17.1でもすでにサポートされており、Firefox 119では区切り線なしで表示されます。

select要素内の区切り線（hr）の実装方法

select要素内で区切り線を実現するのは、簡単です。
下記のHTMLのようにoptionのリスト間に、区切り線としてhr要素を追加するだけです。

select要素内の区切り線（hr）のデモ

select要素内の区切り線（hr）の実際の動作は、デモページをご覧ください。
※Chrome, Edge, Safariで区切り線が表示されます。Firefox 119では区切り線なしで表示されます。

See the Pen
Select with hr by coliss (@coliss)
on CodePen.

小さな変更がユーザーにとって変化をもたらす可能性があります。フォームコントロールを完全にスタイル可能にする方法など、フォームコントロールの今後の詳細についてはpopover APIをご覧ください。また、selectlist要素にも注目しておいてください。