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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
accent-color
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support

Siehe auch