Seleccionar elemento: ahora con reglas horizontales

Una Kravets
El elemento Select se obtiene una actualización pequeña, pero potente en Chrome 119, con una función que también se incluyó en Safari 17. Ahora, puedes agregar elementos <hr> (regla horizontal) a la lista de opciones de selección, y aparecerán como separadores para ayudar a dividir visualmente las opciones y así brindar una mejor experiencia del usuario.

Captura de pantalla del antes y el después con hr en selección. La imagen de después tiene divisores entre grupos.

Para lograrlo, agrega elementos <hr> a la lista de opciones como se muestra en el siguiente 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>

Los cambios pequeños pueden marcar la diferencia para los usuarios. Para conocer el futuro de los controles de formularios, incluido cómo hacerlos completamente estilizados, obtén más información sobre la API de popover y presta atención al futuro elemento selectlist.