accent-color CSS property
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Die accent-color CSS-Eigenschaft legt die Akzentfarbe für Benutzeroberflächen-Steuerelemente fest, die von einigen Elementen generiert werden.
Probieren Sie es aus
accent-color: red;
accent-color: #74992e;
accent-color: rgb(255 255 128);
accent-color: hsl(250 100% 34%);
<section class="default-example container" id="default-example">
<div>
<input checked id="example-element" type="checkbox" />
<label for="example-element" id="example-label">Example Label</label>
</div>
</section>
.container > div {
display: flex;
align-items: center;
}
#example-element {
width: 40px;
height: 40px;
}
#example-label {
margin-left: 10px;
font-size: x-large;
}
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
Diese Eigenschaft wird als das Schlüsselwort auto oder ein <color>-Wert angegeben:
Beschreibung
Browser, die accent-color unterstützen, wenden es derzeit auf die folgenden HTML-Elemente an:
Jeder Benutzeragent hat eine Akzentfarbe mit Variationen zur Sicherstellung der Lesbarkeit und des Kontrasts. Diese Akzentfarbe wird jedoch 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.
Hinweis:
Um das Risiko von Fingerprinting zu verringern, geben einige Browser einen festen Wert für accent-color: auto zurück, es sei denn, es wird unter bestimmten eingeschränkten Umständen verwendet. Weitere Details finden Sie unter Browser-Kompatibilität.
Formale Definition
| Anfangswert | 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
accent-color =
auto |
<color>
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
| Spezifikation |
|---|
| CSS Basic User Interface Module Level 4 # widget-accent |
Browser-Kompatibilität
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