accent-color – Checkboxen und Regler in deiner Markenfarbe, in einer Zeile
Checkboxen und Radiobuttons waren jahrelang der Grund, warum Leute sie mit appearance: none nachgebaut haben – und dabei die Tastaturbedienung verloren. Eine einzige CSS-Eigenschaft macht das überflüssig.
Eine Website in warmem Teal, und mittendrin ein Formular mit knallblauen Checkboxen. Der übliche Ausweg war, das native Element zu verstecken und ein eigenes zu bauen:
/* ⚠️ der alte Weg – und der Anfang vieler Probleme */
input[type="checkbox"] {
appearance: none;
/* … 30 Zeilen Nachbau … */
}Damit verliert man den Fokusrahmen, die Tastaturbedienung, den Zustand „unbestimmt" und die korrekte Ansage im Screenreader — es sei denn, man baut all das mühsam wieder nach. Das ist erstaunlich viel Arbeit für eine andere Farbe.
Eine Zeile reicht
:root {
accent-color: #0f766e;
}Das war es. Checkboxen, Radiobuttons, <progress>-Balken und <input type="range"> übernehmen die Farbe — und bleiben dabei vollständig native Elemente mit allem, was dazugehört.
Gezielt geht natürlich auch:
.gefahr input[type="checkbox"] { accent-color: #b91c1c; }Der Browser rechnet die Gegenfarbe selbst
Der Haken in der Checkbox muss zur Füllfarbe genug Kontrast haben. Darum musst du dich nicht kümmern: Der Browser wählt automatisch Schwarz oder Weiß, je nachdem, wie hell deine Akzentfarbe ist. Bei einem selbst gebauten Nachbau ist genau das die Stelle, die man vergisst.
Im Dunkelmodus mitdenken
:root {
accent-color: #0f766e;
}
@media (prefers-color-scheme: dark) {
:root {
accent-color: #2dd4bf; /* heller, damit es auf Dunkel sichtbar bleibt */
}
}Ein Teal, das auf Weiß gut sitzt, verschwindet auf einem dunkelgrauen Hintergrund fast. Weil accent-color eine ganz normale CSS-Eigenschaft ist, kannst du sie an eine Variable hängen und den Rest erledigt dein bestehendes Theme-System.
Was ebenfalls zum Thema gehört
Zwei Kleinigkeiten, die Formulare sofort besser machen:
input, select, textarea {
font: inherit; /* Formularfelder erben Schrift NICHT automatisch */
color-scheme: light dark; /* System-Widgets in beiden Modi richtig */
}font: inherit ist der Klassiker: Ohne diese Zeile stehen deine Eingabefelder in der Standardschrift des Betriebssystems, während der Rest der Seite in deiner Hausschrift läuft. color-scheme sorgt dafür, dass Dropdowns, Datumsauswahl und Scrollbalken im Dunkelmodus nicht plötzlich weiß aufblitzen.
Der eigentliche Punkt
Das Beste an dieser Eigenschaft ist nicht die Farbe, sondern was sie überflüssig macht. Jedes native Formularelement, das du nicht nachbaust, ist eines, bei dem Tastaturbedienung, Screenreader-Ansage und Touch-Verhalten von selbst funktionieren — auf Geräten, die du nie getestet hast.
Nachbauen lohnt sich erst, wenn das Design wirklich etwas verlangt, das ein Standardelement nicht kann. Eine andere Farbe gehört seit dieser Eigenschaft nicht mehr dazu.
Du hast ein Formular, das optisch nicht zum Rest der Seite passt? Oft sind das drei Zeilen. Schreib mir.
Quellen
Du brauchst mehr als ein Snippet?
Ich entwickle Android-Apps in Kotlin und moderne Websites für Selbstständige und kleine Unternehmen — von der ersten Idee bis zum Release.
Projekt anfragen →Verwandte Snippets
:focus-visible – der Fokusrahmen, den nur Tastaturnutzer sehen
outline: none ist der meistkopierte und schädlichste CSS-Schnipsel überhaupt: Danach kann niemand mehr per Tastatur navigieren. :focus-visible löst genau das Problem, das man damit lösen wollte – ohne den Schaden.
@layer in CSS: Kaskadenebenen statt !important-Wettrüsten
Irgendwann steht in jedem gewachsenen Stylesheet das erste !important – und ein halbes Jahr später das dreißigste. Mit @layer legst du die Reihenfolge einmal fest, und ab da gewinnt nicht mehr der längste Selektor, sondern die Ebene, die du bestimmt hast.
Tooltips ohne JavaScript – CSS Anchor Positioning
Ein Tooltip an einen Button hängen, der ausweicht, wenn oben kein Platz ist, und nicht am overflow: hidden der Elternbox scheitert – das brauchte jahrelang eine Bibliothek. Seit Firefox 147 kann das jeder große Browser in reinem CSS.