accent-color

Die CSS-Eigenschaft accent-color kann die akzentuierte Farbe von Formularsteuerelementen, die von den Standardstilen des Browsers bereitgestellt werden, mit einem benutzerdefinierten Farbwert neu einfärben.

.element {
  accent-color: #f8a100;
}

accent-color ist im CSS Basic User Interface Module Level 4 definiert, das sich derzeit in der Entwurfsphase befindet. Das bedeutet, dass die Details noch in Arbeit sind und sich zwischen jetzt und der offiziellen Empfehlung der Spezifikation ändern könnten.

Syntax

accent-color: auto | <color>;

• Anfangswert: auto
• Gilt für: alle Elemente
• Vererbt: ja
• Berechneter Wert: das Schlüsselwort auto oder eine berechnete Farbe
• Animationstyp: nach berechnetem Werttyp

Werte

/* Keyword */
accent-color: auto;

/* <color> */
accent-color: red;
accent-color: #f8a100
accent-color: rgba(102, 100, 70, 1);
accent-color: hsla(180, 100%, 70%, 1);

/* Global*/
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: unset;

Endlich eine „einfache“ Möglichkeit, Formulare zu gestalten!

Das Gestalten von Formularen war bisher… nun ja, schrecklich. Man muss nur das Anpassen des <progress>-Elements betrachten, um zu sehen, wie schwierig es ist, Steuerelemente zu gestalten. Das führt im Allgemeinen zu einer Entscheidung zwischen der Akzeptanz der Standardstile des Browsers oder einem erheblichen Aufwand, um sie zurückzusetzen und von Grund auf neu zu erstellen.

Hier ist, was normalerweise nötig ist, um eine benutzerdefinierte Farbe für <progress> zu erhalten

accent-color ermöglicht es uns, die Farbe von Formularsteuerelementen mit nur einer Zeile CSS zu ändern

Es funktioniert mit bestimmten Formularsteuerelementen

Bevor Sie nun überall Akzentfarben hinzufügen, ist es erwähnenswert, dass vier bestimmte Formularsteuerelemente die Eigenschaft accent-color unterstützen

• Kontrollkästchen (<input type="checkbox">)
• Optionsfelder (<input type="radio">)
• Bereich (<input type="range">)
• Fortschritt (<progress>)

Es funktioniert mit bevorzugten Farbschemata

Die Eigenschaft accent-color berücksichtigt Farbschemata. Wenn ein Benutzer sein bevorzugtes Farbschema beispielsweise auf „hell“ in seinen Betriebssystemeinstellungen eingestellt hat, muss der Browser den Wert von accent-color auswerten und eine geeignete Benutzeroberflächenfarbe dafür bestimmen. So stellen wir sicher, dass ein zugänglicher Farbkontrast zwischen der Benutzeroberfläche des Browsers und dem Akzent besteht. Es gibt kein Hinnehmen einer hellen Akzentfarbe, die auf einer hellen Formularsteuerelement-Benutzeroberfläche liegt.

Jeder Browser hat seine eigene Art, die zu verwendende Farbe zu berechnen. Diese Demo auf Glitch zeigt eine Reihe von Kontrollkästchen mit verschiedenen Akzentfarben. Sehen Sie sie sich in einem Browser an, der accent-color unterstützt, um zu sehen, wie dieser Browser die Benutzeroberflächenfarbe mit verschiedenen Akzentfarben kombiniert.

Und wenn wir eine Akzentfarbe haben, die wir lieben, die aber einfach nicht mit der vom Browser gewählten Benutzeroberflächenfarbe funktioniert, können wir auf die Eigenschaft color-scheme zurückgreifen, um sie zu überschreiben.

Aber, Sie möchten vielleicht die Wahl des Browsers nicht in Frage stellen, auch wenn sie zwischen verschiedenen Browsern ein wenig inkonsistent ist. Das ist viel zu jonglieren und Sie schaden möglicherweise mehr der Zugänglichkeit der Benutzeroberfläche als dass Sie ihr nützen.

Der Browser überschreibt accent-color im Dunkelmodus nicht, wie er es in anderen Situationen manchmal tut.

Für andere Formularsteuerelemente ist ein anderer Ansatz erforderlich

Auch hier unterstützen bisher nur wenige Formularsteuerelemente Akzentfarben. Das bedeutet, dass wir immer noch auf traditionelle Hacks Ansätze zum Gestalten anderer Arten von Formularsteuerelementen zurückgreifen müssen. Aber hey, Adam Argyle und Joey Arhar haben Sie mit einem netten Snippet versorgt, das hilft, anderen Formularsteuerelementen sowie Listenmarkierungen, Auswahl und sichtbarem Fokus eine Akzentfarbe zu verleihen

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);
}

Browser-Unterstützung

IE	Edge	Firefox	Chrome	Safari	Opera
Nein	93	92	93	15.4	79

iOS Safari	Android Chrome	Android Firefox	Android Browser	Opera Mobile
15.4	104	101	104	Nein

Video: accent-color auf ShopTalk

Chris und Dave zeigen nicht nur die Grundlagen von accent-color, sondern auch, wie es verwendet werden kann, um schlankeren CSS-Code zu schreiben, Farbschemata zu berücksichtigen und sogar einige Tricks, die ohne ihn schwierig durchzuführen gewesen wären.

Weitere Lektüre

• CSS akzentfarbe (web.dev)
• CSSWG Pull Request #5187 (GitHub)
• Eigenschaft accent-color CSS (Chrome Platform Status)
• Firefox Bug Ticket #1705605 (Mozilla Bugzilla)
• Safari Bug Ticket #227587 (Safari Bugzilla)
• Anfrage zur Position: accent-color CSS-Eigenschaft (Chromium-Nachricht an Safari)