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 Schlüsselwort auto oder einem <color>-Wert angegeben:
Beschreibung
Browser, die accent-color unterstützen, wenden diese derzeit auf die folgenden HTML-Elemente an:
Jeder Benutzeragent 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 in den Zuständen, in denen es anwendbar ist, eine Akzentfarbe verwenden.
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