CSS accent-color für Formular-Elemente

Akzentfarbe für Formular-Elemente

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.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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"
Systemfarbe
accent-farbe
.accent input, 
.accent progress {
	accent-color: cyan;
}

Werte: auto, color, initial, inherit

Erblich ja

Die Browser legen automatisch einen guten Kontrast der Accent-Farbe fest, so dass für accent-color keine unterschiedlichen Farben für Darkmode und Lightmode festgelegt werden müssen.

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.