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 support for this feature? Tell us why.
Die accent-color-Eigenschaft von CSS 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
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 nicht von jedem Benutzeroberflächen-Steuerelement oder in jedem Zustand des Steuerelements verwendet. Die accent-color-Eigenschaft wird nur auf Benutzeroberflächen-Steuerelemente angewendet, die eine Akzentfarbe in den Zuständen verwenden, in denen sie anwendbar ist.
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 einstellen
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