Select-Dropdown-Generator
select-Felder einheitlich gestalten: eigener Pfeil, Rahmen, Radius, Fokus-Ring und Farben – fertiges CSS ohne JavaScript.
Der Select-Dropdown-Generator gestaltet native select-Felder einheitlich in allen Browsern. Du stellst Höhe, Innenabstand, Rahmen, Radius, Farben, Fokus-Ring und den Pfeil ein, der als kleines SVG direkt im CSS steckt. Das Feld bleibt ein echtes select mit Tastatur, Screenreader und nativer Auswahlliste auf Mobilgeräten.
<label for="land">Land</label>
<select class="select" id="land" name="land">
<option>Deutschland</option>
<option>Österreich</option>
<option>Schweiz</option>
</select>select-Felder einheitlich gestalten
Mit appearance: none entfernst du den systemeigenen Pfeil und Rahmen. Danach
gestaltest du das Feld wie ein Textfeld und setzt einen eigenen Pfeil als Hintergrundbild.
Hover und :focus-visible bekommen eigene Zustände, damit das Feld bedienbar wirkt.
- Standardaussehen zurücksetzen.
- Größe, Rahmen und Farben festlegen.
- Pfeil als SVG-Hintergrund rechts platzieren.
- Fokus-Ring für Tastaturbedienung ergänzen.
Passend dazu: Input-Feld-Generator und Checkbox- und Radio-Generator.
Häufige Fragen
Kann ich auch die aufgeklappte Liste gestalten?
Klassisch nicht: Die Optionsliste zeichnet das Betriebssystem. Neuere Chromium-Versionen unterstützen appearance: base-select, mit dem sich auch die Liste per CSS gestalten lässt. Bis alle Browser folgen, ist ein gestaltetes geschlossenes Feld die robuste Lösung.
Warum steckt der Pfeil als data-URL im CSS?
So braucht es keine zusätzliche Datei und kein zusätzliches HTML-Element. Das SVG wird URL-kodiert als background-image eingebunden; die Farbe stellst du direkt im Generator ein.
Warum ist rechts mehr Innenabstand?
Damit lange Optionstexte nicht unter den Pfeil laufen. Der Generator ergänzt rechts automatisch Platz für das Icon.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.