Cassidy Williams

Software Engineer in Chicago

Cassidy's face

Use CSS accent-color to style your inputs


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

View posts by tag

#advice #events #technical #learning #musings #meta #personal #work