CSS accent-color für Formular-Elemente

Apr 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"

.accent input, 
.accent progress {
	accent-color: orange;
}

Werte: auto, color, initial, inherit

Erblich ja

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

Eigentlich soll accent-color irgendwann einmal alle Elemente erreichen, aber zurzeit unterstützen die modernen Browser nur wenige Elemente. Die alten (Um)Wege müssen wohl noch eine Weile für ein konsistentes Styling unterstützt werden.