Simplifying Form Styles With accent-color — Smashing Magazine

A Native Route to Branded Form Controls

Few CSS properties have offered as clean a win as aspect-ratio, which let developers retire the old padding-box hack. accent-color looks set to do something similar for form styling. The property lets the browser's own user agent styles handle checkbox, radio button, range and progress elements, with your chosen brand color applied automatically — no pseudo-elements or appearance resets required.

Form controls have long been a pain point. Every browser draws a checkbox or radio button differently through its user agent stylesheet, and there was no standard way to recolor them. The common workaround was to visually hide the native input and style a pseudo-element on its label instead; a technique that remains useful when you need fully custom controls with animations or unusual shapes. But for the much more frequent case — "just make the checkbox match our brand" — that approach is a lot of machinery for a small result.

Setting the Accent

The simplest form is a single declaration on the root element:

:root {
  accent-color: rgba(250, 15, 117);
}

That one line applies the color to checkboxes, radio buttons, range inputs and progress indicators, in any browser that supports the property. The browser then does the accessibility work internally, choosing whether the checkmark or thumb should be white or dark to keep contrast sufficient against your accent color. Different engines use different algorithms, so the exact result can vary from Chrome to Firefox — both are permitted to pick the best option on their own.

Sharing the Color Through Custom Properties

Setting the value once on :root covers form controls, but it doesn't automatically reach other UI you might want to match. A CSS custom property solves that: define the color once, then reference it for button backgrounds, input borders, list markers, selection highlights or the focus ring. That also opens the door to effects that weren't practical before — assign each fieldset an index via an inline --i custom property, then derive the accent-color from an hsl() hue calculation for rainbow checkboxes.

:root {
  --brand: rgba(250, 15, 117);
  accent-color: var(--brand);
}

Pairing With Color Schemes

On its own, accent-color only affects the checked or filled state of a control. The unchecked border stays tied to the browser's default palette, which is where color-scheme comes in. Declaring color-scheme: light dark on :root (or via a <meta name="color-scheme"> tag in the HTML) tells the user agent to render form controls — and default page colors — for dark or light mode according to the user's system setting. The meta tag version has a practical advantage: the browser reads it before parsing CSS, so there's no flash of an incorrect default theme.

The property is not limited to the whole page. Setting color-scheme: dark on an individual element forces its form controls to keep a dark appearance even inside a light-themed section, which is handy for a form card that intentionally stays dark. When a user picks dark mode and you don't override the page's text or background, the default colors invert to black background and white text — usually you'll want to pair color-scheme with a prefers-color-scheme media query to set your own surface colors.

Limits and Leftover Gaps

Adoption is straightforward as a progressive enhancement: unsupported browsers simply show their default controls. Chrome and Edge support it in current releases, Firefox is on track for the next version behind a flag today, and Safari has no support yet. The cost of waiting is low.

What's missing matters more than what's unsupported. accent-color does not reach select dropdowns, and it only styles the checked state — the unchecked border color and thickness stay under browser control. There's also no way to change the control's shape, which means fully custom designs still need the old pseudo-element technique. A larger opportunity sits beyond forms entirely: native video controls, for instance, still require significant reimplementation to accept custom colors. The Open UI group is working on standardizing those components; accent-color shows a path toward styling them without rebuilding their accessibility.

For controls that don't qualify, remember that hiding the native appearance — via -webkit-appearance: none — removes browser affordances like focus remnants. The CSS Paint API (Houdini) can offer more flexible background images on those controls, complete with custom properties for theming, but support is still mostly Chromium-only. That's another case where accent-color's refusal to hide defaults is a feature: you keep the browser's accessibility behavior while finally getting your brand color applied.