Today we’d like to share some fancy “check” animations for checkboxes and radio buttons with you. The idea is to animate an SVG to create a nice visual effect for selecting a checkbox or radio input. There are many possibilities for the animated graphic, like a cross, a check mark, a circle and so on. The technique for animating the SVG paths is by Jake Archibald and you can read how it works in detail in his article Animated line drawing in SVG.
Please note that this is just a proof-of-concept and not a complete solution. The SVG path transition might not work in all browsers, especially mobile ones.
For the custom checkbox or radio button we use the ::before pseudo-element of the label and we hide the input by setting the opacity to 0. It’s actually there, on top of the pseudo-element, so that we can simply click on it and retain the default input selection behavior. We also make the label clickable by setting the value of the
for attribute to the ID of the input.
Here is an example of a form structure:
We are using an unordered list with the inputs and labels.
The core styles for making the input invisible and creating the box out of the pseudo-element is the following:
When an input get’s checked, we’ll animate the opacity of the “pseudo-checkbox” and the color of the label:
As you can see, we are using the adjacent sibling selector for targeting the label and its pseudo element. This can be buggy in some browsers so you might want to add the input inside of the label like shown in example B on the label Wiki page: HTML/Elements/label – W3C Wiki.
We noticed a small glitch for the last example in Firefox (24.0) on Mac. For some reason the end of the SVG drawing is shortly shown before it gets animated.
Here are a couple of screenshots of some of the styles:
A hand-drawn circle around a radio button:
The classic check mark for checkboxes:
A fill drawing for a radio button:
The filler text in the demo is from Corporate Ipsum.
I hope you enjoyed these animations and find them inspiring and useful!