Skip to main content

Command Palette

Search for a command to run...

Styling checkbox colours

Updated
1 min read
Styling checkbox colours

While watching the recent Tailwind Connect recording, I discovered a new utility class named accent-lime-400 . I'd never seen this one, but after some digging, I think it's pretty cool and helps make UIs more consistent with the brand theming.

You can change the style of all checkboxes with a simple line of code:

input[type="checkbox"] {
  accent-color: #a3e635; /* lime-green */
}

Checking MDN Web Docs, the browser support is pretty good too, so unless you're worrying about IE11, you should be free to use this as you wish.