Element auswählen: jetzt mit horizontalen Regeln

Una Kravets
Das Auswahlelement erhält in Chrome 119 ein kleines, aber umfangreiches 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. Diese werden als Trennzeichen angezeigt, um die Optionen für eine bessere Nutzererfahrung visuell aufzuteilen.

Screenshot von „Vorher und Nachher“, in dem „Std“ ausgewählt ist. Das nachfolgende Bild weist Trennlinien zwischen den Gruppen auf.

Fügen Sie dazu <hr>-Elemente in die Optionsliste ein, wie im folgenden HTML-Code dargestellt:

<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>

Schon kleine Änderungen können einen Unterschied machen. Weitere Informationen zur Zukunft von Formularsteuerelementen und dazu, wie sie vollständig stilisiert werden können, finden Sie unter Popover API. Achten Sie auch auf das zukünftige Element selectlist.