DEV Community

Cassidy Williams
Cassidy Williams

Posted on • Originally published at blog.cassidoo.co

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

Top comments (7)

Collapse
 
madsstoumann profile image
Mads Stoumann

There are also AccentColor and AccentColorText system colors, currently only supported in Safari — handy, if you want to set your own components to the system default accent-color.

Collapse
 
jangelodev profile image
João Angelo

Hi, Cassidy Williams,
Thanks for sharing

Collapse
 
codewithcaen profile image
CodeWithCaen

Wow, been using CSS for almost a decade and had no idea about this!

Collapse
 
keyurparalkar profile image
Keyur Paralkar

Thanks for sharing this @cassidoo. It's insightful

Collapse
 
vadimnevlad profile image
Vadym Marukhnenko

Thanks for sharing

Collapse
 
officialphaqwasi profile image
Isaac Klutse

Thanks for sharing

Collapse
 
sebaslc16 profile image
Joan Sebastian Londoño Castaño

Hi, Cassidy, hank you for sharing.
Keep coding <>