CSS, HTML und Javascript mit {stil}

CSS accent-color 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 ein langatmiges Lavieren mit Präfixen für unterschiedliche Browser in unterschiedlichen Version unterworfen, um dem allseits 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 Loch ohne Boden).

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

  • input type="range"
  • HTML progress
  • input type="checkbox"
  • input type="radio"
Systemfarbe
accent-farbe
.accent input, 
.accent progress {
	accent-color: lime;
}

Werte: auto, color, initial, inherit

Erblich ja

Am Rande: Nur Firefox beherrscht den Range-Slider.

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.