CSS-Akzentfarbe

Mit einer Codezeile können Sie die Farben Ihrer Marke in integrierte HTML-Formulareingaben einfügen.

Adam Argyle
Joey Arhar
Joey Arhar
X GitHub

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. Wenn wir alles von Grund auf neu 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.

Unterstützte Browser

  • Chrome: 93. <ph type="x-smartling-placeholder">
  • Edge: 93. <ph type="x-smartling-placeholder">
  • Firefox: 92. <ph type="x-smartling-placeholder">
  • Safari: 15.4 <ph type="x-smartling-placeholder">

Quelle

<ph type="x-smartling-placeholder">
</ph> Screenshot einer Akzentfarben-Demo, bei dem das helle Design Kästchen, Optionsfelder, Bereichsschieberegler und Fortschrittselement sind alle Hotpink gefärbt. <ph type="x-smartling-placeholder">
</ph> Demo

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 dieselbe accent-color: hotpink für dunkles mit Hotpink-Motiven versehene Steuerelemente.

<ph type="x-smartling-placeholder">
</ph> Screenshot einer Demo mit Akzentfarbe, bei der das dunkle Design Kästchen, Optionsfelder, Bereichsschieberegler und Fortschrittselement sind alle Hotpink gefärbt. <ph type="x-smartling-placeholder">
</ph> Demo

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):

Screenshot von Firefox und Chromium nebeneinander ein volles Spektrum an Kästchen in verschiedenen Farbtönen und Schattierungen wiedergeben.

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. wie in diesem Artikel beschrieben, 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? Twittern @argyleink durch den Selektor. zu diesem Artikel hinzugefügt.