CSS-Akzentfarbe

Mit nur einer Codezeile können Sie Ihre Markenfarbe bei den Eingaben in integrierten HTML-Formularen anpassen.

Adam Argyle
Joey Arhar
Joey Arhar
X GitHub

Die heutigen HTML-Formularelemente lassen sich nur schwer anpassen. Sie haben das Gefühl, nur wenige oder gar keine benutzerdefinierten Stile zu verwenden oder Eingabestile zurückzusetzen und neu zu erstellen. Eine von Grund auf neu zu erstellen, erfordert viel mehr Arbeit als erwartet. Es kann auch zu vergessenen Stilen für Elementzustände (indeterminate, wie ich sie sehe) und zum Verlust der integrierten Bedienungshilfen führen. Es kann mehr Arbeit bedeuten, das, was der Browser bietet, vollständig zu reproduzieren.

accent-color: hotpink;

Mit dem CSS-accent-color aus der CSS-UI-Spezifikation können Sie Elemente mit einer einzigen CSS-Zeile färben. So sparen Sie sich Anpassungen, da Sie Ihre Marke in die Elemente einbinden können.

Unterstützte Browser

  • 93
  • 93
  • 92
  • 15,4

Quelle

Ein Screenshot einer Akzentfarbe in einem hellen Design, bei dem Kästchen, Optionsfelder, ein Bereichsschieberegler und das Fortschrittselement alle rot gefärbt sind.
Demo

Die Eigenschaft accent-color funktioniert auch mit color-scheme, sodass Autoren sowohl die hellen als auch die dunklen Elemente färben können. Im folgenden Beispiel hat der Nutzer ein dunkles Design aktiviert. Auf der Seite wird color-scheme: light dark verwendet und dasselbe accent-color: hotpink für Steuerelemente mit rot gefärbtem dunklem Design verwendet.

Ein Screenshot einer Akzentfarbe im dunklen Design, bei dem Kästchen, Optionsfelder, ein Bereichsschieberegler und das Fortschrittselement alle rot gefärbt sind.
Demo

Unterstützte Elemente

Derzeit werden nur vier Elemente über die Eigenschaft accent-color gefärbt: Kontrollkästchen, Radio, Bereich und Fortschritt. Sie können sich unter https://accent-color.glitch.me eine Vorschau in hellen und dunklen Farbschemas ansehen.

Kästchen

Radio

Bereich

Fortschritt

Kontrast gewährleisten

Um zu verhindern, dass Elemente nicht zugänglich sind, müssen Browser mit accent-color eine geeignete Kontrastfarbe bestimmen, die neben dem benutzerdefinierten Akzent verwendet werden soll. Der folgende Screenshot zeigt, wie sich Chrome 94 (links) und Firefox 92 Nightly (rechts) in ihren Algorithmen unterscheiden:

Screenshot von Firefox und Chromium nebeneinander, in dem eine ganze Reihe von Kästchen in verschiedenen Farbtönen und Dunkelheit angezeigt wird

Das Wichtigste dabei ist, dem Browser zu vertrauen. Wählen Sie eine Markenfarbe aus und vertrauen Sie darauf, dass damit intelligente Entscheidungen für Sie getroffen werden.

Extra: Mehr Färbung

Sie fragen sich vielleicht, wie Sie mehr als diese vier Formularelemente färben können? Hier ist ein kleiner Sandkasten mit Tönen:

  • den Fokusring
  • Textauswahl hervorheben
  • Markierungen auflisten
  • Pfeilzeichen (nur WebKit)
  • Daumenleiste Bildlaufleiste (nur Firefox)
html {
  --brand: hotpink;
  scrollbar-color: hotpink Canvas;
}

:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }

:is(
  ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button
) {
  color: var(--brand);
}

Potenzielle Zukunft

Die Spezifikation beschränkt die Anwendung von accent-color nicht auf die vier in diesem Artikel gezeigten Elemente. Später könnte weitere Unterstützung hinzugefügt werden. Elemente wie das ausgewählte <option> in einem <select> können mit accent-color hervorgehoben werden.

Was möchten Sie im Web sonst noch färben? Senden Sie einen Tweet mit Ihrem Selektor @argyleink. Möglicherweise wird er diesem Artikel hinzugefügt.