CSS accent-color
Easily customize the color of native form controls for a modern, branded UI!
What is the accent-color Property?
The CSS accent-color property allows you
to set the accent color for form controls such as checkboxes, radio
buttons, range sliders, and progress bars. This makes it easy to match
native controls to your site's color scheme without complex custom
markup or JavaScript.
- Simple Customization: Change the accent color of supported controls with a single line of CSS.
- Native Look & Feel: Controls remain accessible and keep their native behavior.
- Wide Support: Works in all modern browsers for checkboxes, radios, range, and progress.
Syntax
selector {
accent-color: #4f8cff;
}
Tip: Use CSS variables for easy theme switching and
consistent branding!
Browser Support:
accent-color is
supported in all modern browsers.
Interactive Examples
Custom Accent Checkbox & Radio
.accent-demo {
accent-color: var(--color-accent, #4f8cff);
}
Custom Accent Range & Progress
.accent-demo {
accent-color: var(--color-accent, #4f8cff);
}
Try it: Interact with the controls above. The accent
color is set using
accent-color and can be easily themed!