CSS accent-color Property
Example
Set the accent color for different user-interface controls:
input[type=checkbox] {
accent-color: red;
}
input[type=radio] {
accent-color: green;
}
input[type=range] {
accent-color:
rgb(0, 0, 255);
}
progress {
accent-color: hsl(39, 100%, 50%);
}
Try it Yourself »
Definition and Usage
The accent-color property specifies the
accent color for user-interface controls like: <input type="checkbox">, <input
type="radio">, <input type="range"> and <progress>.
| Default value: | auto |
|---|---|
| Inherited: | yes |
| Animatable: | no. Read about animatable |
| Version: | CSS4 |
| JavaScript syntax: | object.style.accentColor="red" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| accent-color | 93.0 | 93.0 | 92.0 | 15.4 | 79.0 |
CSS Syntax
accent-color:
auto|color|initial|inherit;
Property Values
| Value | Description | Demo |
|---|---|---|
| auto | Default value. The browser choose the accent color | Demo ❯ |
| color | Specifies the color to be used as the accent color. All legal color values can be used (rgb, hex, named-color, etc). For more information on legal values, read our CSS Colors Tutorial | Demo ❯ |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
