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
/* 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
Formale Definition
Initialer Wert | auto |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Ja |
Berechneter Wert | auto wird wie angegeben berechnet und <color> Werte werden wie für die color Eigenschaft berechnet. |
Animationstyp | by computed value type |
Formale Syntax
Beispiele
Eine benutzerdefinierte Akzentfarbe festlegen
HTML
<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />
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
background-color
,border-color
,caret-color
,color
,column-rule-color
,outline-color
,text-decoration-color
,text-emphasis-color
,text-shadow
: Andere farbbezogene Eigenschaften<color>
: Verwandter Datentyp<input>
: Verwandtes HTML-Element