CSS accent-color Property

❮ Previous Complete CSS Reference Next ❯

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>.

Show demo ❯

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

❮ Previous Complete CSS Reference Next ❯