选择元素:现在使用水平规则

在 Chrome 119 中,选择元素进行了小而强大的升级,其中的一项功能也已在 Safari 17 中推出。现在,您可以将 <hr>(水平线)元素添加到选定选项列表中,这些元素将显示为分隔符,以便在视觉上划分选项,从而提供更好的用户体验。

选择“小时”后和之前的屏幕截图。修改后的图片在各组之间添加了分隔线。

为此,请将 <hr> 元素添加到选项列表中,如以下 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

小小的改变对用户来说可能很重要。如需详细了解表单控件的未来发展,包括如何使其完全可设置样式,请了解 popover API,并密切关注未来的 selectlist 元素。