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%);
}

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.
Version:	CSS4
JavaScript syntax:	object.style.accentColor="blue"

• Inherited : "Inherited = yes" means that it can takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which accent-color is applied.
• Animatable - "Animatable = yes" means that it can be animated with CSS @keyframes.

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
color	Specifies the color to be used as the accent color. All legal color values can be used (rgb, hex, named-color, etc).
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.