Select element: now with horizontal rules

Una Kravets

The select element gets a small but mighty upgrade in Chrome 119, with a feature that also landed in Safari 17. Now, you can add <hr> (horizontal rule) elements into the list of select options and they will appear as separators to help visually break up the options for a better user experience.

Screenshot of before and after with hr in select. The after image has dividers between groups.

To achieve this, add <hr> elements into the options list as shown in the following HTML:

<label for="major-se>lect"Please selec<t a ma>j<or:>/l<abel br/

select name="majors&quo>t; <id="major->select"
 < option> va<lu>e=&<quot;"Select a> major/opti<on
  hr>
  <option value="arth>"Art< Histor>y/o<ption
  option valu>e="finear<ts">;Fi<ne Arts/option
  o>ption valu<e=">;gd<es"Graphic Desi>gn/op<tion
  >opt<io>n v<alue="lit"Li>terature/option
  opt<ion val>ue=<"music"Music/op>tion
  hr
  option valu<e=">;ae<roeng"Aerospace En>gineering/option
<  optio>n v<alue="biochemeng&>quot;Biochemical Eng<ineerin>g/o<ption
  option value>="civileng"C<ivil En>gin<eering/option
  option> value="compeng&q<uot;Com>p<uter En>gineering/option
  option value="eleng"Electrical Engineering/option
  option value="mecheng"Mechanical Engineering/option
/select

Small changes can make a difference to your users. For more information on the future of form controls, including how to make them fully stylable, learn about the popover API and keep an eye out for the future selectlist element.