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 CSS-Eigenschaft accent-color legt die Akzentfarbe für Benutzeroberflächen-Steuerelemente fest, die von einigen Elementen erzeugt 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 value */
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 als ein <color>-Wert angegeben:
Beschreibung
Browser, die accent-color unterstützen, wenden sie derzeit auf die folgenden HTML-Elemente an:
Jeder User Agent verfügt über eine Akzentfarbe mit Variationen, um Lesbarkeit und Kontrast sicherzustellen. Diese Akzentfarbe wird nicht für jedes Benutzeroberflächen-Steuerelement und auch nicht in jedem Zustand eines Steuerelements verwendet. accent-color wird nur auf Benutzeroberflächen-Steuerelemente angewendet, die in den Zuständen, in denen sie zutrifft, eine Akzentfarbe verwenden.
Hinweis:
Um das Risiko von Fingerprinting zu verringern, geben einige Browser für accent-color: auto einen festen Wert zurück, sofern sie nicht unter bestimmten eingeschränkten Umständen verwendet wird. Einzelheiten 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
Festlegen einer benutzerdefinierten Akzentfarbe
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