Mit nur einer Codezeile können Sie Ihre Markenfarbe bei den Eingaben in integrierten HTML-Formularen anpassen.
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.
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.
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:
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.