Mit einer Codezeile können Sie die Farben Ihrer Marke in integrierte HTML-Formulareingaben einfügen.
Die heutigen HTML-Formularelemente sind schwierig anpassen. Es fühlt sich an, benutzerdefinierte Stile auswählen oder Eingabestile zurücksetzen und von Grund auf neu aufbauen. Alles von Grund auf neu zu erstellen, als erwartet. Es kann auch zu vergessenen Stilen für Elementzustände führen. (unbestimmt, und der Verlust integrierter Bedienungshilfen. Um das, was der Browser bietet, vollständig nachzubilden, als Sie übernehmen möchten.
accent-color: hotpink;
CSS accent-color
aus der CSS-Benutzeroberfläche
ist hier eine Färbung
Elemente mit einer CSS-Zeile hinzufügen.
Ihre Marke in Elemente einzubringen.
<ph type="x-smartling-placeholder">
![Screenshot einer Akzentfarben-Demo, bei dem das helle Design
Kästchen, Optionsfelder, Bereichsschieberegler und Fortschrittselement
sind alle Hotpink gefärbt.](https://web.dev/static/articles/accent-color/image/a-light-theme-screenshot-e2988ab5bb352.png?authuser=6&hl=de)
Das Attribut accent-color
funktioniert auch mit
Mit color-scheme
können Autoren sowohl
die hellen und dunklen Elemente.
Im folgenden Beispiel hat der Nutzer ein dunkles Design aktiviert.
color-scheme: light dark
und verwendet denselben Wert für „accent-color: hotpink
“ für „Dunkel“
mit Hotpink-Motiven versehene Steuerelemente.
![Screenshot einer Demo mit Akzentfarbe, bei der das dunkle Design
Kästchen, Optionsfelder, Bereichsschieberegler und Fortschrittselement
sind alle Hotpink gefärbt.](https://web.dev/static/articles/accent-color/image/a-dark-theme-screenshot-5c090145c9c8e.png?authuser=6&hl=de)
Unterstützte Elemente
Derzeit werden nur vier Elemente über die Eigenschaft accent-color
gefärbt:
Kontrollkästchen, Radio, Bereich und
Fortschritt. Hier können Sie sich jedes Element in der Vorschau ansehen.
https://accent-color.glitch.me in hellen und
dunkle Farbschemata.
Kästchen
Radio
Bereich
Fortschritt
Kontrast wird sichergestellt
Um zu verhindern, dass Elemente, die nicht zugänglich sind, in Browsern mit accent-color
müssen Sie einen möglichen Kontrast
Farbe neben dem benutzerdefinierten
Akzent. Im Folgenden sehen Sie einen Screenshot, der zeigt, wie Chrome 94 (links) und Firefox 92
Die Algorithmen unterscheiden sich in der Nacht (rechts):
Das Wichtigste dabei ist, dem Browser zu vertrauen. Geben Sie eine Markenfarbe an und vertrauen Sie darauf, dass damit intelligente Entscheidungen für Sie getroffen werden.
Extra: Stärkere Färbung
Sie fragen sich vielleicht, wie Sie mehr als diese vier Formularelemente färben können. Hier ist ein minimale Sandbox mit den folgenden Färbungen:
- Fokusring
- Textauswahl-Highlights
- Markierungen auflisten
- Pfeilanzeigen (nur WebKit)
- 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 Elemente.
der in diesem Artikel beschrieben wird, können Sie später weitere Unterstützung bieten. Elemente wie das
Ausgewählte <option>
in einer <select>
könnten mit den
accent-color
Was färben Sie gerne im Web? Tweet @argyleink durch den Selektor. zu diesem Artikel hinzugefügt.