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.

accent-color is available in Chrome 91+ and (!) you have to turn on experimental web platform features to use the CSS property.

:root {
  accent-color: purple;
}

The result looks like the following (example on CodePen).

A purple radio and checkbox input

If you want to you can also feature detect if the browser supports the property 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.

Related Topics

Related Articles