CSS accent-color für Formular-Elemente

Sep 2023

accent-color soll dem Branding des Internet-Auftritts unter die Arme greifen: Die wichtigen Elemente der Webseite einfach mit der individuellen Farbe versorgen. Bislang sind wir bei Formularen auf das Lavieren mit Präfixen für unterschiedliche Browser in unterschiedlichen Versionen unterworfen, um dem vertrauten Blau der Formularelemente zu entkommen.

CSS accent-color

Formulare mit CSS sind auch nach dem Auftritt von appearance: none ein Wespennest: Entweder alles so lassen wie es ist oder alle Formularelemente von Grund auf aufbauen (ein Faß ohne Boden).

Dagegen kommt accent-color ins Spiel: Nur wenige Zeilen einfachstes CSS färben die schwierigen Kandidaten:

input type="range"
HTML progress
input type="checkbox"
input type="radio"

.nature {
	accent-color: auto; /** Voreinstellung **/
}

.individual {
	accent-color: orange; /** überschreiben **/
}

Werte: auto, color, initial, inherit

Erblich ja

accent-color-ios — Auf dem iPhone wirkt *accent-color* auch auf das button-Element.

Nachdem die Browser Anfang 2020 nur Checkbox und Radio unterstützten, werden heute alle vier UI-Elemente mit accent-color durchgehend erreicht. So ab 2022 wurde Progress/Meter von allen Browsern angenommen, inzwischen wird accent-color: auto im Range-Slider von Chrome, Edge und Firefox unterstützt, aber nicht von Safari auf dem Desktop, wohl aber auf dem Handy. Das iPhone übernimmt accent-color sowohl für den Range Slider als auch für die Schriftfarbe des button-Elements.