DEV Community


Posted on

CSS variables, input[type="color"] and form animations

I was contemplating not sharing this because I was like "Meh it's pretty simple, anyone can do it" but then I reminded myself that the word "simple" is very relative, and there was a time in my life when this would have made me 🤯

(this is a good thing to think about for anyone who hesitates on writing blog posts! Just because you think "everybody knows this stuff" doesn't mean it's true. Lots of people do NOT know this stuff.)

Anyway, I was just in the mood to play around with checkbox/radio button animations and as I went along got carried away and added customization. Here we are:

Quick stuff to know about

  • Checkbox "x" animations use CSS gradients for the progressive "growing" of the x/"filling" of the box
  • The x elements themselves are ::before and ::after pseudo elements rotated on an angle so that they form diagonal lines, crossed over one another.
  • Radio buttons use "scale" transition animation for the circle to grow-in/shrink-in
  • <input type="color"> is how you get that color picker input
  • CSS Custom Properties (variables) are how you easily have the user pick a color.
  • I found this little colour manipulation library so that after someone picks a colour, I can find lighter/darker versions.
  • 🐛 Safari is annoying in that when you change the accent colour, it doesn't seem to properly update already-checked items that used a gradient animation, so you have to uncheck and recheck. Chrome/Firefox seem to update correctly.

You can of course view the source to see all the nitty gritty 🙂

Top comments (8)

milg15 profile image
Maria Isabel Lopez

thank you for sharing! I'm kind of new to Web dev and learning this "simple" things is always great 💚

tyrannaut profile image
Tim Ryan

This is a great little UX enhancement and I definitely didn't know about this. Nice!

nickytonline profile image
Nick Taylor

Nice. I like these little animations as they're suttle. Looking forward to your next post!

yokotobe profile image

Nice UX improvement !
Thank you

jwp profile image
John Peters

Thanks for the tip Rose!

conaxliu profile image

I don't see any difference between Radio Buttons and Radio Buttons Inverse. Am I missing something?

rose profile image

It's pretty subtle but in one case the circle grows larger from the center and on the other it shrinks inwards :)

conaxliu profile image

Ah..I see!