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ächensteuerelemente 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;
}
Browser, die accent-color unterstützen, wenden es momentan auf die folgenden HTML-Elemente an:
Jeder Benutzeragent hat eine Akzentfarbe mit Variationen, um Lesbarkeit und Kontrast sicherzustellen. Diese Akzentfarbe wird jedoch nicht von jedem Benutzeroberflächensteuerungselement oder in jedem Zustand des Steuerelements verwendet. Die accent-color-Eigenschaft wird nur auf Benutzeroberflächensteuerelemente angewendet, die eine Akzentfarbe verwenden, und zwar in den Zuständen, in denen sie anwendbar ist.
Syntax
css
/* 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
| 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
html
<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />
CSS
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
Loading…
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