Veröffentlicht am 24. März 2025
Ab Chrome 135 können Webentwickler und ‑designer endlich auf ein barrierefreies, standardisiertes und per CSS gestaltbares <select>-Element im Web zurückgreifen. Das hat viele Jahre gedauert und viele Stunden an Entwicklungs- und Spezifikationsarbeit erfordert. Das Ergebnis ist eine unglaublich umfangreiche und leistungsstarke Komponente, die in älteren Browsern nicht fehlerhaft dargestellt wird.
Hier siehst du ein Video mit benutzerdefinierten Auswahlmöglichkeiten, die mit diesen neuen Funktionen erstellt wurden:
Wenn Sie die Entwicklung aufmerksam verfolgt haben, werden Sie feststellen, dass sich seit Unas Bitte um Community-Feedback einige Spezifikationsnamen und Funktionen geändert haben. Wenn Sie sich an diesem Beitrag orientiert haben und wissen möchten, was sich geändert hat, finden Sie hier weitere Informationen.
Außerdem gibt es eine neue MDN-Dokumentation für anpassbare Select-Elemente mit vielen Details.
Meet appearance: base-select
Eine neue CSS-Eigenschaft appearance: base-select, mit der das <select>-Element in einen neuen, konfigurierbaren und formatierbaren Zustand versetzt wird, der allgemein als „Basis“-Styles bezeichnet wird:
.custom-select {
&, &::picker(select) {
appearance: base-select;
}
}
Mit base-select werden eine Reihe neuer Funktionen und Verhaltensweisen freigeschaltet:
- Ändert den HTML-Parser des Browsers für die Inhalte im
<select>. - Ändert die gerenderten Interna des
<select>. - Stellt neue interne Teile und Status für die
<select>bereit. - Ein neuer, minimalistischer Look, der sich optimal anpassen lässt.
- Die angezeigten Optionen befinden sich in der obersten Ebene, wie ein Pop-over.
- Die angezeigten Optionen werden mit
anchor()positioniert.
Bei der Verwendung von base-select gehen eine Reihe von Funktionen und Verhaltensweisen verloren:
- Das
<select>wird außerhalb des Browserbereichs nicht gerendert. - Es werden keine integrierten Komponenten des Betriebssystems für Mobilgeräte ausgelöst.
- Die
<select>berücksichtigt nicht mehr die Breite des längsten<option>.
Eine <select> kann jetzt Rich-HTML-Inhalte enthalten
Bisher konnten Sie ein <select> nicht anpassen. Wenn Sie beispielsweise ein Bild oder eine SVG-Datei in das <option>-Element eingefügt haben, wurde es vom Browser ignoriert.
Betrachten Sie das folgende HTML. Der Browser würde es so lesen, wie Sie es geschrieben haben:
<select class="custom-select">
<option>
<svg aria-hidden>…</svg>
<span>HTML</span>
</option>
<option>
<svg aria-hidden>…</svg>
<span>CSS</span>
</option>
<option>
<svg aria-hidden>…</svg>
<span>JavaScript</span>
</option>
<option>
<svg aria-hidden>…</svg>
<span>WASM</span>
</option>
</select>
Das verwendete DOM würde jedoch nicht <svg> enthalten:
<select class="custom-select">
<option>
<span>HTML</span>
</option>
<option>
<span>CSS</span>
</option>
<option>
<span>JavaScript</span>
</option>
<option>
<span>WASM</span>
</option>
</select>
Hier sehen Sie (von links nach rechts) die Darstellung des vorherigen HTML-Codes in Chrome, Safari und Firefox. Wenn der Browser appearance: base-select unterstützt, wird das SVG in der Option angezeigt. Andernfalls nicht.
Aufgrund der Parseränderungen besteht das Risiko, dass vorhandene Websites mit anpassbaren Select-Feldern nicht mehr richtig funktionieren. Chrome enthält die Funktionen, die für ein Finch-Experiment erforderlich sind, falls es im Notfall deaktiviert werden muss. Wenn alles gut geht, wird das Experiment beendet und der Code wird dauerhaft in den Quellcode aufgenommen.
Vollständig anpassbar
Jeder Teil eines base-select kann ausgetauscht, angepasst und animiert werden. In dieser Demo werden alle neuen Funktionen verwendet, um aussagekräftige Auswahlmöglichkeiten zu schaffen.
Viele weitere Beispiele finden Sie im Abschnitt „Ressourcen“ am Ende dieses Beitrags.
Unveränderte JavaScript-Schnittstellen
Für Ihre vorhandenen JavaScript-Interaktionen mit einem <select>-Element bestehen keine Risiken.
Wenn Sie jedoch beginnen, Rich-HTML in Ihre <option>-Elemente einzufügen, sollten Sie die ausgewählten Werte testen, da der Browser Bilder und SVG weiterhin parst und ignoriert. Die Logik zur Bestimmung des ausgewählten Content-Strings hat sich jedoch geändert. Je nachdem, was Sie in Ihren Optionen haben, müssen Sie möglicherweise Anpassungen vornehmen.
Wenn Sie das Attribut value für ein <option> verwenden, müssen Sie sich keine Sorgen machen.
Ressourcen
Chrome ist der erste Browser, in dem base-select implementiert wird. Alle Browser haben jedoch an den Spezifikationen mitgewirkt und es gibt noch weitere „Basiselemente“, die fertiggestellt werden müssen. Das ist erst der Anfang.
Wir werden weiterhin Anleitungen, Beispiele und Ressourcen zum Anpassen ausgewählter Elemente hinzufügen. Bis dahin findest du weitere Informationen unter den folgenden Links.
- Webstandards
- Chrome
- Community
Ein besonderer Dank geht an alle, die dazu beigetragen haben, dass das möglich wurde.