accent-color
The accent-color property tints built-in form controls like checkboxes, radios, and range sliders.
Syntax
accent-color: auto | <color>;
Examples
:root {
accent-color: oklch(0.55 0.18 265);
}
Output
Renders all native checkboxes, radio buttons, range sliders, and progress bars in the brand blue.
Notes
A one-line way to brand native controls while keeping their accessibility and platform behavior. The browser auto-adjusts the contrasting checkmark/thumb color. Set on :root for site-wide theming.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 93 |
| firefox | 92 |
| safari | 15.4 |
| edge | 93 |