Selecteer element: nu met horizontale regels

Una Kravets
Het select-element krijgt in Chrome 119 een kleine maar krachtige upgrade, met een feature die ook in Safari 17 is beland. Nu kunt u <hr> -elementen (horizontale regel) toevoegen aan de lijst met geselecteerde opties. Deze zullen verschijnen als scheidingstekens om de opties visueel te verdelen voor een betere gebruikerservaring.

Screenshot van voor en na met hr in select. De naafbeelding heeft scheidingslijnen tussen groepen.

Om dit te bereiken, voegt u <hr> -elementen toe aan de optielijst, zoals weergegeven in de volgende HTML:

<label for="major-select">Please select a major:</label> <br/>

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <option value="arth">Art History</option>
  <option value="finearts">Fine Arts</option>
  <option value="gdes">Graphic Design</option>
  <option value="lit">Literature</option>
  <option value="music">Music</option>
  <hr>
  <option value="aeroeng">Aerospace Engineering</option>
  <option value="biochemeng">Biochemical Engineering</option>
  <option value="civileng">Civil Engineering</option>
  <option value="compeng">Computer Engineering</option>
  <option value="eleng">Electrical Engineering</option>
  <option value="mecheng">Mechanical Engineering</option>
</select>

Kleine veranderingen kunnen een verschil maken voor uw gebruikers. Voor meer informatie over de toekomst van formulierbesturingselementen, inclusief hoe u ze volledig stileerbaar kunt maken, kunt u meer lezen over de popover-API en het toekomstige selectlist- element in de gaten houden.