Style Native Form Elements with accent-color in CSS

Tired of blue checkboxes that don’t match your brand?

Now you can fix that in one line of CSS.

Native form elements are finally catching up. You can now change the color of checkboxes, radios, range sliders, and even progress bars. Without JavaScript, wrappers, or hacks.

It’s as simple as:

input,
progress {
	accent-color: red;
}

Why this matters:

• Matches your brand identity down to the smallest details
• Works on all common input types, no need for custom components
• Keeps the native behavior and accessibility intact

It’s supported in all major browsers (even mobile!) with 94,6%.

So if you’re still using SVG icons or replacing inputs with divs just to match a color, you can stop now.

To learn more tips about CSS, make sure to join my newsletter below ❤️