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
: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.
- IE10+ (I think)