Use CSS accent-color to style your inputs
Cassidy Williams

Cassidy Williams @cassidoo

About: bold and brash

Location:
Chicago, IL
Joined:
Feb 22, 2017

Use CSS accent-color to style your inputs

Publish Date: Jan 31 '24
40 7

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

Comments 7 total

Add comment