The accent-color
CSS property sets the accent color for user-interface controls generated by some elements.
The accent-color
CSS property sets the accent color for user-interface controls generated by some elements.
Browsers that support accent-color
currently apply it to the following HTML elements:
/* Keyword values */ accent-color: auto; /* <color> values */ accent-color: red; 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;
auto
Represents a UA-chosen color, which should match the accent color of the platform, if any.
<color>
Specifies the color to be used as the accent color.
Initial value | auto |
---|---|
Applies to | all elements |
Inherited | yes |
Computed value |
auto is computed as specified and <color> values are computed as defined for the color property. |
Animation type | by computed value type |
<input type="checkbox" checked /> <input type="checkbox" class="custom" checked />
input { accent-color: auto; display: block; width: 30px; height: 30px; } input.custom { accent-color: rebeccapurple; }
Specification |
---|
CSS Basic User Interface Module Level 4 # widget-accent |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
accent-color |
93 |
93 |
92 |
No |
79 |
15.4 |
93 |
93 |
92 |
66 |
15.4 |
17.0 |
<input>
element<color>
data typecolor
, background-color
, border-color
, outline-color
, text-decoration-color
, text-emphasis-color
, text-shadow
, caret-color
, and column-rule-color
© 2005–2022 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color