Animated toggle checkbox without javascript

:before and -moz-appearance: none

This all thing could have been so much cleaner. Sadly Firefox stoped this (and very possibly also older IE). Firstly Mozilla doesn’t actually hide the checkbox when you add -moz-apperance: none instead it simply just removes all styling. This might have been ok, we could solve this by offsetting the checkbox and using overflow: hidden. But sadly Mozilla also doesn’t support :before or :after on checkboxes.

As a result of Firefox’s bad support we need to add an extra element. I went for a span. This is far from an ideal solution but I’ve yet to figure out a better way of doing this.

The end solution uses the <label> to toggle the checkbox even if it’s not visible, a gradient background for the background color change and a transition to animate it all.

Browser support