HTML-Tools

Kostenlose Customizable Select Generator

Generate CSS for customizable select elements using appearance: base-select, picker icons, checkmarks, and open/closed state styling.

Tool wird geladen...

Was ist Customizable Select Generator?

Das anpassbare Select-Element ist eine neue CSS-Funktion, mit der Sie native HTML-Select-Elemente gestalten können, ohne sie durch JavaScript-gesteuerte div-Strukturen zu ersetzen. Mit appearance: base-select können Sie das Picker-Symbol, die Auswahlhaken und das Dropdown-Popover gestalten, während die gesamte integrierte Zugänglichkeit und das Formularverhalten eines echten Select-Elements erhalten bleiben. Keine JavaScript-Dropdown-Bibliothek erforderlich.

Kurze Antwort

Gestalten Sie native Select-Elemente mit appearance: base-select (Chrome 135+). Verwenden Sie ::picker-icon für Dropdown-Pfeile, option::checkmark für Auswahlindikatoren und ::picker(select) für Popover-Styling. Native Formularsemantik und Tastaturzugänglichkeit bleiben erhalten. Der Fallback ist ein standardmässiges lesbares Select.

Last updated: 2026-05-28

Einschränkungen

Das anpassbare Select ist eine sehr neue Funktion (Chrome 135+) und noch nicht im CSS Baseline. Firefox und Safari unterstützen es noch nicht. Testen Sie immer mit @supports und stellen Sie einen lesbaren nativen Fallback bereit.
Nicht alle Aspekte des Selects sind anpassbar. Das Optionslisten-Layout, das Scrollverhalten und die mobile Picker-Oberfläche werden weiterhin vom Browser gesteuert. Dies ist beabsichtigt —es hält das Select auf allen Geräten nutzbar.
Die Pseudo-Elemente ::picker-icon und option::checkmark sind Teil des anpassbaren Select-Modells und können nicht auf anderen Elementen verwendet werden. Sie funktionieren nur innerhalb eines Selects mit appearance: base-select.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

Geben Sie die Select-Optionen als Wert|Label-Paare ein, eine pro Zeile.
Wählen Sie den Stil des Picker-Symbols (Chevron, benutzerdefiniertes SVG oder keins) und den Stil des Auswahlhakens (Haken, Punkt oder keins).
Fügen Sie optional Styles für den geschlossenen Zustand und Browser-Fallback-Hinweise ein.
Kopieren Sie das generierte HTML und CSS. Das Select funktioniert in allen Browsern als natives Formularelement.

Wofür du es nutzen kannst

Ein Länderauswahl-Dropdown an ein Marken-Designsystem anpassen, ohne eine benutzerdefinierte Select-Bibliothek.
Einen gestalteten Sprachwechsler erstellen, der native Formularsemantik und Tastaturzugänglichkeit beibehalt.
Einen Themenauswahlen mit benutzerdefinierten Hakensymbolen erstellen, der in Formularen und Screenreadern funktioniert.

Anwendungsfalle

Praxisbeispiele

Beispiel

Markenkonformer Länderauswahler

Ein Checkout-Formular benötigt ein Länder-Dropdown, das zum Design der Website passt. Verwenden Sie das anpassbare Select mit einem benutzerdefinierten Chevron-Symbol, Markenfarben und einem Haken für die ausgewählte Option. Das Select funktioniert weiterhin als natives Formularelement.

Beispiel

Design-Umschalter-Dropdown

Eine Dokumentationsseite hat einen Hell/Dunkel-Design-Umschalter. Gestalten Sie das Select mit appearance: base-select, einem benutzerdefinierten SVG-Sonne/Mond-Symbol als Picker-Indikator und thematisierten Hintergrundfarben für das Popover.

Haufige Fehler

Erwarten, dass das anpassbare Select in allen Browsern funktioniert —es erfordert Chrome 135+ mit experimentellen Funktionen. Ältere Browser zeigen ein standardmässiges natives Select.
appearance: none anstelle von appearance: base-select verwenden —ersteres entfernt alle nativen Styles einschliesslich der Barrierefreiheitsrollen.
Vergessen, dass base-select noch nicht im CSS Baseline ist —immer testen und ein lesbares natives Select als Fallback bereitstellen.

Überprüfung

Testen Sie das Select in Chrome 135+, um zu bestätigen, dass das benutzerdefinierte Styling mit Picker-Symbol und Haken korrekt gerendert wird.
Testen Sie in Firefox und Safari, um zu überprüfen, ob das Select auf ein lesbares natives Erscheinungsbild zurückfällt.

FAQ

Fragen zu Customizable Select Generator

Was ist der Unterschied zwischen appearance: none und appearance: base-select?

appearance: none entfernt ALLE nativen Select-Styles, einschliesslich des Dropdown-Pfeils, und kann die Barrierefreiheit beeinträchtigen. appearance: base-select behält die native Semantik und das Tastaturverhalten bei, während Sie die visuellen Teile (Symbol, Haken, Popover) gestalten können. base-select ist der sichere Weg, Selects anzupassen.

Welche Browser unterstützen anpassbare Selects?

Chrome 135+ mit aktivierten 'Experimental Web Platform Features'. Dies ist eine sehr neue Funktion und noch nicht im CSS Baseline. Verwenden Sie für die Produktion @supports (appearance: base-select), um benutzerdefinierte Styles nur in unterstützenden Browsern anzuwenden und andernfalls das native Select als Fallback anzuzeigen.

Verwandte Tools