Seleccionar elemento: ahora con reglas horizontales

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

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

Para lograrlo, agrega elementos <hr> a la lista de opciones, como se muestra en el siguiente código 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 pequeños cambios pueden marcar la diferencia para tus usuarios. Si deseas obtener más información sobre el futuro de los controles de formularios, incluido cómo lograr que sean totalmente personalizables, obtén más información sobre la API emergente y presta atención al futuro elemento selectlist.