Styling forms just got easier with accent-color

Styling forms just got easier! 🥳 - It isn't everything, but it's a nice step in the right direction. Heads up, it's currently only working on the checkbox, radio, range and progress elements.

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:59 - How accent-color works
01:35 - Baked in accessibility
02:41 - But what about browser support?!

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[KevinPowell]

This is rolling out with Chrome 93, which is supposed to start rolling out today. If you can't use it yet, it's just around the corner :). For FF, it's coming with v92, which is coming very soon :)

[ozgurg]

When Microsoft gave up Internet Explorer, Safari took its place.

[alanwalker]

I love React.js but having to design and use CSS was making me switch completely to the backend. Your videos really helped me to better understand the CSS and keeping me intact in the Frontend world. Please never stop making these videos.

[Darkray]

Kevin I can't say thank you enough. I usually don't write many comments but I have to admit that you are my mentor considering css since a long time and I really enjoy your videos! 🙏

[patrickc.]

Great tip! It takes a bit of work to do custom styling and hide the checkbox etc., so this is a great alternative!

[nomadshiba]

fun fact you can choose white or black background to make the foreground visible with
background-color: currentColor;
filter: saturate(0) contrast(10000) invert()

[laranadesign]

OMG FINALLY!!!
Customers would always notice the default blue (chrome) and ask me to make it their theme primary color instead...I dreaded it, but this looks so much easier. 😃

[nickwoodward]

Does this work for the highlight in a <select> element? That would be great 🙂

[thehonestabe]

I've been a software engineer for 8 years and a web developer for 6 years, yet every time I watch a video from your channel, I always learn something new!

Thank you, Kevin!

[omkaryadav]

Hey kevin..If you're reading this..Thank you for your efforts..Your videos helped me, in so many worst situations..so much ❤️ from India 🙏

[zachjensz]

Great that they took developer INPUT and added this FORM of styling :)

[thatoneguy]

Oh my god finally an easier way to style form inputs... I just spent almost 24 hours trying to find a good way to do this that didn't involve hiding the input and all those other weird hacks.

[mamba-pcxv]

Was searching today about this. Nice timing <3

[jammincoder]

That's super helpful! Nice shirt btw!

[alejomakevids]

Yes, I remember trying to add styles to a checkbox element before YOU CAN'T. At least not way most ppl would maybe approach. Then I found out while looking in many different forums that you can by using the filter property and hue-rotation. It's not the best solution but worked for me.

[mannixmd]

Now we have to wait for the browsers to implement this :D

[jeffborges]

I never even thought about styling a check box 😲👀😂🙏🙏🙏 The awesome Kevin strikes again

[coldfreeze]

Hi kevin, I really love your style of videos, but I would like to know if you would do more stuff around production environmnet stuff, as I always feel like you focus on bleeding edge, which is cool and I love that but I would love to learn more about what stable things can be used to create :) Many thanks :)

[JNET_Reloaded]

Brilliant video and thanks for the codepen your gr8 :D

[ronidey]

Nice!! Thank you for sharing this info😀