Element auswählen: jetzt mit horizontalen Regeln

Una Kravets
Das Element „select“ erhält in Chrome 119 ein kleines, aber starkes Upgrade mit einer Funktion, die auch in Safari 17 verfügbar ist. Jetzt können Sie der Liste der Auswahloptionen <hr>-Elemente (horizontale Regel) hinzufügen. Sie werden als Trennzeichen angezeigt, um die Optionen visuell aufzuschlüsseln und die Nutzerfreundlichkeit zu verbessern.

Screenshot der Vorher-/Nachher-Ansicht mit „h“ in der Auswahl. Das Nachher-Bild hat Trennlinien zwischen Gruppen.

Füge dazu der Optionsliste <hr>-Elemente hinzu, wie im folgenden HTML-Code gezeigt:

<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 Änderungen können für Ihre Nutzer eine große Wirkung haben. Weitere Informationen zur Zukunft von Formularsteuerelementen und dazu, wie Sie sie vollständig stilsicher machen können, finden Sie in der Popover API. Achten Sie auch auf das zukünftige selectlist-Element.