Change the form control color with accent-color property

Do you like default colors used by form controls such as radio buttons, checkboxes, or sliders? I mean, they are the same on every website. These colors have become more modern after Microsoft commitment to redesign form controls in Chromium, but they are still the same on every website.

When we want to change these default colors, we have to use some of 1001 ways to create custom-styled form controls with all their bugs coming.

Imagine if you could change the color of checkboxes to match the theme color of your site…

If your heart is beating faster after the words above, what do you think about the accent-color CSS property?

accent-color

Last year, I found an interesting issue in the CSSWG drafts titled ‘Allow specifying the “accent color” of a form control element’.

Adam Argyle made me dream about this feature again this February after his tweet:

accent-color: hotpink; 🎉 Chromium is prototyping the style feature for forms! I couldn’t wait, so I went and tried it out in a custom build. Here it is! hotpink checkboxes with 1 line of CSS 😎

Disclaimer: it still doesn’t work, don’t try to use it at home. Or maybe you can use it as a progressive enhancement?

So what does the spec say? Let’s visit the CSS Basic User Interface Module Level 4.

The accent-color CSS property allows the author to specify the accent color for user-interface controls generated by the element.

The UA should use the specified accent-color to draw whichever parts of the element’s control(s) would have otherwise been styled with an accent color.

Sounds interesting. If my website has some theme colors, can I use them to make all the form controls more… design integrated? Without hacks and bugs.

:root {
    --color-accent: #ffcc00;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-accent: #880088;
    }
}

body {
    accent-color: var(--color-accent);
}

Just one line of CSS!

If you see not defaultish form controls below, then the future has arrived, and your browser supports accent-color right now.

Early demos

During the last GDE meeting Joey Arhar showed us a really curious demo of his implementation of the accent-color property in Chrome: https://accent-color.glitch.me/.

If you see all of the form controls on the page blue, it’s ok. To see the rainbow, you need a Canary version of Chrome with “Experimental Web Platform features” enabled:

1. Go to chrome://flags/.
2. Enable “Experimental Web Platform features”.
3. Restart the browser.
4. Ta-da!

With Firefox Nightly, you can do the same:

1. Go to about:config.
2. Enable “browser.preferences.experimental”.
3. Restart the browser.
4. Ta-da!

If you did everything right, you might see something like this.

PWA

If you’ve already made your web application installable (PWA), you can set the theme color of its standalone version.

<meta name="theme-color" content="#ffcc00">

In the new Safari 15 this tiny snippet will make your website look trendy on macOS too.

But the next step will be full coloring of your PWA.

<meta name="theme-color" content="#ffcc00">
<style>
    body { accent-color: #ffcc00; }
</style>

Browser support

The accent-color is now supported under experimental flags in Firefox and Chrome. You can watch the statuses in bug trackers:

• Chrome Platform Status
• Firefox Bugzilla
• WebKit Bugzilla

It still has some bugs and difficulties that need to be solved. You can set the color you want, but the user agent must keep the form control accessible. So it’s still in beta. But you can help browsers test the early implementations of the feature and share your feedback in bug trackers.