Styling form controls without rebuilding them
The old way was appearance: none plus dozens of lines to rebuild the control. accent-color changes the native control color in one property.
2input[type="radio"] {
3 accent-color: #7c3aed;
4}
2 appearance: none;
3 width: 1.25rem; height: 1.25rem;
4 border: 2px solid ...;
5 background: ...; border-radius: ...;
6 /* + :checked state, focus, etc. */
7}
Browser Support for accent-color
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.
Your first month is free
Managed WordPress hosting for faster sites.
One property
Set the accent color. Checkboxes, radios, range, and progress use it. No rebuild.
Native behavior kept
Focus, keyboard, and screen reader behavior stay intact. You only change the color.
Theme friendly
Use a custom property. Dark mode or theme switch updates controls automatically.
How it works
To style checkboxes and radios you used to set appearance: none and then rebuild the control with width, height, border, background, border-radius, and :checked states. Dozens of lines and you had to handle focus and accessibility yourself.
accent-color tells the browser which color to use for the control's accent (check mark, radio dot, range thumb). The control stays native, so focus and keyboard behavior are unchanged. One line, theme-aware if you use a variable.