Use CSS accent-color to style your inputs

Cassidy Williams - Jan 31 - - Dev Community

If you've ever wanted to style HTML <input> tags in your projects, you know it's a bit tricky to deal with the labels and making everything look custom and themed.

This won't go wildly into all the ways you can style them, BUT, if you want a quick win to change the color of those controls, use the CSS accent-color property!

accent-color works on the following HTML elements:

  • <input type="checkbox">
  • <input type="radio">
  • <input type="range">
  • <progress>

You can style all of these by just plopping it in your root:

:root {
    accent-color: #ccff00;
}
Enter fullscreen mode Exit fullscreen mode

Or, if you want different elements to have different colors, you can style them all individually!

Here's the documentation if you want to learn more!

Byyyyye <3

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .