Der Frontend-Entwickler Ahmad Alfy hat am 27. Oktober fünf Beispiele veröffentlicht, in denen Auswahlfelder eines Formulars mehr zeigen als eine Zeile Text. Grundlage ist die CSS-Angabe appearance: base-select, die seit April 2025 in Chrome und Edge und seit September 2026 auch in Safari funktioniert. In Firefox bleibt das Auswahlfeld vorerst ein gewöhnliches Dropdown-Menü.
Inhalt 4 Abschnitte
Bisher bestand jede Option eines Auswahlfelds aus reinem Text, Bilder oder Zusatzangaben verwarf der Browser. Alles, was für die Entscheidung zählt, musste in eine kurze Beschriftung passen.[1] Jetzt darf eine Option eine Vorschau, einen Preis, eine Berufsbezeichnung oder einen Warnhinweis enthalten.
Das Wichtigste in Kürze
- Mit
appearance: base-selectdürfen Optionen eines Auswahlfelds Vorschauen, Zahlen und Hinweise enthalten. - Tastatursteuerung, Absenden des Formulars und Validierung bleiben beim Browser, JavaScript ist nicht nötig.
- Auf Smartphones entfällt der gewohnte Auswahldialog des Betriebssystems, Alfy empfiehlt die Umstellung nur für Geräte mit Maus.
Was zeigen die fünf Beispiele?
Alfy setzt in jede Option die Information, nach der Nutzer sonst suchen oder rechnen müssten: die Schrift selbst, die Uhrzeit vor Ort, Lieferzeit und Preis, die Abteilung oder eine Freigabepflicht.
In der Schriftauswahl erscheint jede Schrift in ihrer eigenen Gestalt, dafür reicht eine Stilangabe pro Option. Die Zeitzonenliste nennt statt „GMT+09:00“ die aktuelle Uhrzeit in Tokio und ob dort Tag oder Nacht ist. Nur dieses Beispiel braucht JavaScript, weil die Uhrzeiten aus Intl.DateTimeFormat kommen.
Versandarten stehen laut Alfy meist als Optionsfelder mit ganzen Sätzen im Formular. In seinem Auswahlfeld stehen Lieferzeit und Preis in ausgerichteten Spalten, gebaut mit CSS Grid in jeder Option. Für zwei oder drei kurze Möglichkeiten hält er Optionsfelder weiterhin für richtig, weil dort alles ohne Klick sichtbar ist.
Bei zwei Kollegen mit gleichem Namen unterscheidet die Zeile darunter, etwa Backend-Entwickler oder Buchhaltung. Das fünfte Beispiel markiert Teams, deren Freigabe nötig ist, bevor jemand einen Bericht mit ihnen teilt.
Was bleibt vom normalen Auswahlfeld erhalten?
Das Auswahlfeld bleibt technisch ein echtes HTML-Element select. Tastatursteuerung, Sprung per Anfangsbuchstabe, Absenden des Formulars, Pflichtfeld und Validierung übernimmt weiterhin der Browser.
Laut WebKit-Team funktionieren auch Screenreader und die Reaktionen der Seite auf eine geänderte Auswahl automatisch, weil es sich um ein echtes Formularelement handelt.[3] Gestaltete Dropdowns entstanden bisher meist aus JavaScript und verschachtelten Containern. Tastaturbedienung und Angaben für Screenreader mussten die Entwickler dort selbst nachrüsten.
Für Onlineshops zählt das doppelt. Das Barrierefreiheitsstärkungsgesetz gilt seit dem 28. Juni 2025 für Dienstleistungen im elektronischen Geschäftsverkehr, die Verbrauchern angeboten werden.[6] Eine Auswertung von Produktseiten fand zuletzt bei 64 Prozent kritische Fehler bei der Barrierefreiheit.
Safari 27.2 hat am 26. Oktober die Standardgestaltung nachgebessert und das Pseudoelement ::field-content ergänzt, mit dem sich die angezeigte Auswahl im geschlossenen Feld gestalten lässt.[4] Google hatte die Funktion im März 2025 für Chrome angekündigt, die Optionen erscheinen dort in einer eigenen Ebene über der Seite.[2]
Browser-Unterstützung, Stand 2. November 2026
Fünf Muster: Was in der Option steht
Jedes Nachrechnen, das ein Auswahlfeld dem Kunden erspart, macht ein Formular leichter. Der Einstieg kostet eine Zeile CSS und keine neue Bibliothek.
Michael Dobler, Herausgeber Dr. Web
Wo liegen die Grenzen?
Auf Smartphones verzichtet das gestaltete Auswahlfeld auf den Dialog des Betriebssystems, in Firefox fehlt die Funktion ohne Umstellung in den Einstellungen, und manche JavaScript-Frameworks kommen damit nicht zurecht.
iOS zeigt bei normalen Auswahlfeldern ein Drehrad, Android ein Auswahlfenster am unteren Rand. Beide sind für Daumen ausgelegt und auf die Bedienhilfen des Systems abgestimmt. Alfy schaltet base-select deshalb per Media Query nur für Geräte mit Maus oder Trackpad ein, Smartphones behalten die gewohnte Auswahl.
MDN stuft die Funktion noch nicht als Baseline ein, also als in allen gängigen Browsern verfügbar, und warnt: Manche Frameworks blockieren die neuen Möglichkeiten, bei anderen scheitert mit serverseitigem Rendering die Hydration, also der Schritt, in dem der Browser die vorgerenderte Seite bedienbar macht.[5] Agenturen mit React- oder Vue-Projekten sollten das vor dem Einsatz testen.
Ältere Browser zeigen ein normales Auswahlfeld mit dem reinen Text jeder Option. Deshalb muss dieser Text allein verständlich sein, also „Express, morgen, 8,50 Dollar“ statt drei loser Bruchstücke. Welche CSS-Funktionen bereits Skripte ersetzen, zeigt unser Überblick 150 Zeilen JS sparen.
Quellen
6 Quellen anzeigenQuellen ausblenden
- Ahmad AlfyA select should tell you something
- Chrome for DevelopersThe <select> element can now be customized with CSS
- WebKitWebKit Features for Safari 27.0
- WebKitWebKit Features for Safari 27.2
- MDNCustomizable select elements
- Gesetze im InternetBarrierefreiheitsstärkungsgesetz, § 1
Mehr Newshunger?
- 98 % Browser-Support sind keine 98 %
- Designsysteme sollten von Haus aus schnell sein: Den Odell misst zehn Bibliotheken
- Fluid Functionalism: 28 shadcn-Komponenten, deren Hover dem Mauszeiger folgt
- CSS shape(): beliebige Formen, die jetzt responsiv mitwachsen
- CSS-Tricks hat einen neuen Eigentümer: Geoff Graham übernimmt die Website von DigitalOcean
- Digitale Barrierefreiheit: So machen Sie Ihren Shop fit für alle Nutzer
