Customizing form controls used to be one of the more frustrating parts of CSS.
Checkboxes, radio buttons, and range sliders often required complex workarounds or JavaScript to match a website's design.
Theaccent-color property changes that.
With a single line of CSS, you can customize the primary color of supported native form controls while preserving their accessibility and platform-specific behavior.
:root {
accent-color: #4f46e5;
}Or target specific elements:
input[type="checkbox"], input[type="radio"], progress {
accent-color: #10b981;
}Why use accent-color ?
- 🎨 Quickly align form controls with your brand colors.
- ♿ Preserve native accessibility and user experience.
- 🚀 Avoid building custom controls from scratch.
- 🧹 Write less CSS and maintain cleaner code.
While browser support is excellent in modern browsers, it's still a good idea to test your forms across your target platforms to ensure a consistent experience.
If you only need to change the highlight color of native form controls, accent-color is one of the simplest and most effective CSS features available today.
Frequently Asked Questions
What is the CSS accent-color property?
The accent-color property lets you customize the highlight color of native form controls such as checkboxes, radio buttons, range sliders, and progress bars using a single CSS declaration.
Which HTML elements support accent-color?
Most modern browsers support accent-color for checkboxes, radio buttons, range inputs (sliders), and progress elements. Support may vary depending on the browser and operating system.
Is the CSS accent-color property supported by all browsers?
accent-color is supported by all major modern browsers, including Chrome, Edge, Firefox, and Safari. If you need to support older browsers, test your forms and provide a suitable fallback if necessary.
Does accent-color improve accessibility?
Yes. Because it styles native form controls instead of replacing them with custom components, accent-color helps preserve built-in accessibility features and platform-specific behavior.
Can I use accent-color on any HTML element?
No. The property only affects supported form controls. Applying it to regular elements like <div> or <button> has no effect.
