accent-color

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die accent-color CSS Eigenschaft legt die Akzentfarbe für Benutzeroberflächen-Steuerelemente fest, die von einigen Elementen generiert werden.

Probieren Sie es aus

Browser, die accent-color unterstützen, wenden diese derzeit auf die folgenden HTML-Elemente an:

Jeder User Agent hat eine Akzentfarbe mit Variationen, um Lesbarkeit und Kontrast zu gewährleisten. Diese Akzentfarbe wird nicht von jedem Benutzeroberflächen-Steuerelement oder in jedem Zustand des Steuerelements verwendet. Die accent-color wird nur auf Benutzeroberflächen-Steuerelemente angewendet, die eine Akzentfarbe in den Zuständen verwenden, in denen sie anwendbar ist.

Syntax

css
/* Keyword values */
accent-color: auto;

/* <color> values */
accent-color: darkred;
accent-color: #5729e9;
accent-color: rgb(0 200 0);
accent-color: hsl(228 4% 24%);

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

Werte

auto

Repräsentiert eine von der Benutzeragentur gewählte Farbe, die, wenn möglich, der Akzentfarbe der Plattform entsprechen sollte.

<color>

Gibt die Farbe an, die als Akzentfarbe verwendet werden soll.

Formale Definition

Anfangswertauto
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertauto wird wie angegeben berechnet und <color> Werte werden wie für die color Eigenschaft berechnet.
Animationstypby computed value type

Formale Syntax

accent-color = 
auto |
<color>

Beispiele

Eine benutzerdefinierte Akzentfarbe festlegen

HTML

html
<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />

CSS

css
input {
  accent-color: auto;
  display: block;
  width: 30px;
  height: 30px;
}

input.custom {
  accent-color: rebeccapurple;
}

Ergebnis

Spezifikationen

Specification
CSS Basic User Interface Module Level 4
# widget-accent

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch