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
Top comments (7)
There are also
AccentColor
andAccentColorText
system colors, currently only supported in Safari — handy, if you want to set your own components to the system default accent-color.Hi, Cassidy Williams,
Thanks for sharing
Wow, been using CSS for almost a decade and had no idea about this!
Thanks for sharing this @cassidoo. It's insightful
Thanks for sharing
Thanks for sharing
Hi, Cassidy, hank you for sharing.
Keep coding <>