Artboard 16light, inspiration, solution, idea, innovation,Google Sheets iconSwift icon
Published at
Updated at
Reading time
1min

While reading the Chrome 91 DevTools release notes, I discovered that hopefully soon, we'll be able to define the highlight color of radios and checkboxes using the accent-color CSS property. It allows to match form controls with the website's style and colors.

Update: accent-color will be available starting in Chrome 93 and Firefox 92.

:root {
  accent-color: purple;
}

A purple radio and checkbox input

If your browser supports accent-color, you can also play around with it below. 👇

And lastly, if you want evaluate accent-color browser support, detect it using feature queries (@supports (accent-color: red) { /* ... */ }) or CSS.supports in JavaScript. 👏

Read more about it in the CSS Basic User Interface Module Level 4 or on web.dev.

Related Topics

Related Articles