Native form controls were untouchable for two decades, which is why every design system ended up painting its own checkbox; the focus ring, the keyboard pass, and the dark-mode audit all became your job. accent-color is the middle road, and it is brilliant value per character.
:root { accent-color: crimson; }How far one line goes
- The property reaches checkbox, radio, range, progress, and meter; the tick, the diamond, and the range thumb keep their native shapes and simply take your color.
- The browser computes contrast against the accent, so checked glyphs and the filled track stay readable in whichever color scheme the page is rendering.
- Set it on :root and every control inherits; set it on one control and only that one changes, the cheap way to mark a single destructive toggle.
Accent versus full custom controls
Full control over the drawing remains available when a hero surface demands an exact shape, and if that is a brand contract, fine. For the rest of the form, native controls with an accent stay accessible for free, and they keep improving as engines refine their paint. gacor trade to make: no ARIA attribute in exchange for a palette.
Pair it deliberately with color-scheme. A root that declares light dark plus an accent keeps controls coherent across prefers-color-scheme without a second theme file.