CSS accent-color – HTML input-Elemente nativ stylen

Von: Raimund, Jonas

Die CSS-Eigenschaft »accent-color« legt die Akzentfarbe für einige Formular-Elemente wie Checkboxen oder Fortschrittsbalken fest.

Aktualisiert von 2021 – 2023

Mit der CSS-Eigenschaft accent-color können wir auf die Akzentfarbe von Formular-Elementen wie Checkboxen oder Radio-Buttons zugreifen. Diese bestimmt die farbliche Gestaltung von voreingestellten oder unterschiedlichen Zuständen wie bspw. einer Auswahl. Bisher wird diese Gestaltung durch die Browser-Voreinstellungen vorgegeben.

Was verbessert der Einsatz von accent-color?

Abgesehen von einer unterschiedlichen Darstellung in unterschiedlichen Browsern fügen sich die Browser-Voreinstellungen oft nicht in das gewünschte Design. Die Gestaltung von Formularelementen ist bisher nur mit einigem Aufwand möglich: Die nativen Elemente werden vorzugsweise mittels CSS versteckt und an deren Stelle werden mit CSS erzeugte Elemente oder auch Grafiken eingefügt.

Wir können die Akzentfarbe setzen, jedoch behält der Browser die Entscheidung in Hinsicht auf weitere Darstellungsoptionen. Wenn der Kontrast nach den Kriterien des Browsers zu gering ausfällt, ändert er bspw. die Umrandungslinie eines Radio-Buttons oder den Hintergrund eines Range-Bereichs.

Anwendung und Browser-Support

Der initiale Wert für die Eigenschaft ist auto. Gibt man eine Farbe an, ist die Notation in HTML-Farbnamen, Hex-, RGB- und HSL-Werten möglich.

.accented {
    accent-color: lime;
}

.accented {
    accent-color: #ff0000;
}
.accented {
    accent-color: rgb(249, 249, 10);
}
.accented {
    accent-color: hsl(21°, 86%, 65%);
}

Bisher unterstützt die CSS-Eigenschaft accent-color diese vier Elemente:

• Checkboxen
• Radio-Buttons
• Range-Slider
• Fortschrittsbalken

accent-color wird von Edge, Firefox, Chrome sowie den Android-Browsern unterstützt. Bei »Can I use« findet ihr den aktuellen Stand der Unterstützung.

Fazit

Es wäre sicherlich vorteilhaft, wenn mit dem Bearbeiten der Akzentfarbe über CSS auch andere input-Elemente oder Zustände angepasst werden könnten. Ansonsten kann ein einheitliches und vollständig umgesetztes Design von Formularen unverändert nur mit den erwähnten Aufwänden erreicht werden.

Geschrieben von:

Raimund Büchner

Raimund ist oft die erste Ansprechperson bei kulturbanause. Er kümmert sich hauptsächlich um die Betreuung und Beratung unserer bestehenden als auch künftigen Kundschaft. Ein weiterer Schwerpunkt seiner Tätigkeit liegt im Design nicht unmittelbar sichtbarer Dinge: Struktur und Inhalte. Projekte unterstützt er daher vor allem in der Anfangsphase in Bereichen wie Informationsarchitektur, UX-Design und Content Strategy.

Jonas Hellwig

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing