Veröffentlicht: 24. März 2025
Ab Chrome 135 können Webentwickler und ‑designer endlich ein barrierefreies, standardisiertes und mit CSS stilisierbares <select>-Element im Web verwenden. Die Entwicklung hat viele Jahre gedauert und viele Stunden an Entwicklungs- und gemeinsamer Spezifikationsarbeit erfordert. Das Ergebnis ist eine unglaublich umfangreiche und leistungsstarke Komponente, die auch in älteren Browsern funktioniert.
Hier siehst du ein Video mit Beispielen für benutzerdefinierte Auswahlen mit diesen neuen Funktionen:
Wenn Sie die Entwicklung genau verfolgt haben, werden Sie feststellen, dass sich einige Namen und Funktionen der Spezifikationen seit Unas Anfrage nach Communityfeedback geändert haben. Wenn du anhand dieses Beitrags gearbeitet hast und wissen möchtest, was sich geändert hat, ist Una für dich da.
Außerdem gibt es eine brandneue Dokumentation auf MDN für anpassbare Auswahl, die viele Details enthält.
Meet appearance: base-select
Eine neue CSS-Eigenschaft appearance: base-select, die das Element <select> in einen neuen, konfigurierbaren und stilbaren Zustand versetzt, der allgemein als „Basisstil“ bezeichnet wird:
.custom-select {
&, &::picker(select) {
appearance: base-select;
}
}
Wenn Sie base-select verwenden, werden eine Reihe neuer Funktionen und Verhaltensweisen freigeschaltet:
- Ändert den HTML-Parser des Browsers für den Inhalt in der
<select>. - Ändert die gerenderten internen Elemente der
<select>. - Hier werden neue interne Teile und Status für die
<select>angezeigt. - Ein neues minimalistisches Design, das für die Anpassung optimiert ist.
- Die angezeigten Optionen befinden sich in der obersten Ebene, z. B. in einem Pop-up.
- Angezeigte Optionen, die mit
anchor()positioniert sind
Wenn Sie base-select verwenden, sind einige Funktionen und Verhaltensweisen nicht mehr verfügbar:
- Das
<select>wird nicht außerhalb des Browserfensters gerendert. - Es werden keine integrierten Komponenten des mobilen Betriebssystems ausgelöst.
- Die
<select>nimmt nicht mehr die Breite des längsten<option>an.
<select> können jetzt Rich-HTML-Inhalte enthalten
Bevor Sie <select> anpassen konnten, wurden Elemente wie Bilder oder SVGs, die Sie in das <option>-Element eingefügt haben, vom Browser ignoriert.
Betrachten Sie das folgende HTML-Element. 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 enthält jedoch keine <svg>:
<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) Chrome, Safari und Firefox, die die vorherige HTML-Datei rendern. Wenn der Browser appearance: base-select unterstützt, wird das SVG in der Option angezeigt. Andernfalls nicht.
Aufgrund der Änderungen am Parser besteht das Risiko, dass vorhandene Websites mit anpassbaren Auswahlelementen nicht mehr funktionieren. Chrome enthält die Funktionen eines Finch-Tests, falls sie im Notfall deaktiviert werden müssen. Wenn alles in Ordnung ist, wird der Test beendet und der Code dauerhaft in die Quelle übernommen.
Vollständig anpassbar
Jeder Teil eines base-select kann ausgetauscht, angepasst und animiert werden. Hier ist eine Demo, in der alle neuen Funktionen verwendet werden, um erkennbare und aussagekräftige Auswahlmöglichkeiten zu erstellen.
Im Abschnitt „Weitere Informationen“ am Ende dieses Beitrags finden Sie viele weitere Beispiele.
Unveränderte JavaScript-Schnittstellen
Vorhandene JavaScript-Interaktionen mit einem <select>-Element sind nicht gefährdet.
Wenn Sie Ihren <option>-Elementen jedoch Rich-HTML hinzufü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 Inhaltsstrings hat sich jedoch geändert. Je nach Ihren Optionen müssen Sie möglicherweise Anpassungen vornehmen.
Wenn Sie das value-Attribut für ein <option> verwenden, müssen Sie sich keine Sorgen machen.
Ressourcen
Chrome ist der erste Browser, der base-select implementiert, aber alle Browser haben an den Spezifikationen mitgewirkt. Es gibt noch weitere „Basis“-Elemente, die fertiggestellt werden müssen. Das ist erst der Anfang.
Wir werden demnächst weitere Anleitungen, Beispiele und Ressourcen zur Anpassung ausgewählter Elemente hinzufügen. Bis dahin findest du unter den folgenden Links weitere Informationen.
- Webstandards
- Chrome
- Community
Ein besonderer Dank geht an alle, die daran beteiligt waren.