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!

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

Byyyyye <3

Comments

[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.

[João Angelo]

Hi, Cassidy Williams,
Thanks for sharing

[CodeWithCaen]

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

[Keyur Paralkar]

Thanks for sharing this @cassidoo. It's insightful

[Vadym Marukhnenko]

Thanks for sharing

[Isaac Klutse]

Thanks for sharing

[Joan Sebastian Londoño Castaño]

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