accent-color
The accent-color
CSS property sets the accent color for user-interface controls generated by some elements.
Try it
Browsers that support accent-color
currently apply it to the following HTML elements:
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;
Values
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.
Formal definition
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 |
Formal syntax
Examples
Setting a custom accent color
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;
}
Result
Specifications
Specification |
---|
CSS Basic User Interface Module Level 4 # widget-accent |
Browser compatibility
BCD tables only load in the browser
See also
background-color
,border-color
,caret-color
,color
,column-rule-color
,outline-color
,text-decoration-color
,text-emphasis-color
,text-shadow
: Other color-related properties<color>
: Related data type<input>
: Related HTML element- Applying color to HTML elements using CSS