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;
}

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

See the Pen accent-color demo by Cassidy (@cassidoo) on CodePen.

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

Byyyyye <3