CSS accent-color Property

Definition and Usage

accent-color The property is used to specify the emphasis color of user interface controls, for example:

<input type="checkbox">
<input type="radio">
<input type="range">
<progress>

Example

Set emphasis colors 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

CSS Syntax

accent-color: auto|color|initial|inherit;

Property Value

Value Description
auto Default Value. The browser chooses the emphasis color.
color

Specifies the color used as the emphasis color.

All valid color values can be used (rgb, hexadecimal, named colors, etc.).

For more information on valid values, please see our CSS Color Tutorial.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: auto
Inheritability: Yes
Animation Creation: Supported. See:Animation-related Properties.
Version: CSS4
JavaScript Syntax: object.style.accentColor="red"

Browser Support

The numbers in the table indicate the browser version that first fully supports this property.

Chrome Edge Firefox Safari Opera
93.0 93.0 92.0 15.4 79.0