March 26, 2024

About the CSS Accent Color Property

Justin Golden

The accent-color Property

The accent-color is a newer CSS property that some browsers support and will affect the background colors of various elements

Supported Elements

• input[type=checkbox]
• input[type=radio]
• input[type=range]
• progress

Setting The Color

You can set accent-color like any other CSS property, inline or with a CSS selector:

<input type="checkbox" style="accent-color: green;" />

input[type='checkbox'] {
	accent-color: green;
}

You can set accent-color however you prefer to set a color, so hex/rgb/rgba, hsl/hsla, color name, etc.

Here’s some working code and a working demo for you!

<input checked type="checkbox" style="accent-color: green;" />
<input checked type="radio" style="accent-color: green;" />
<input type="range" style="accent-color: green;" />
<progress value="50" max="100" style="accent-color: green;"></progress>

Browser support is (at time of writing) around 94%.

Links

Mozilla Docs Browser Support