iPhone-Style Checkbox Using Only CSS (No Images!)

This is just a proof-of-concept and quite is fragile and hacky. For this reason, I won't be explaining any of the techniques or even providing the code snippets for you. You can always fork the pen to play with it.

See the Pen HfulB by David Murdoch (@davidmurdoch) on CodePen.

Some of the awful things I've done:

• I'm using psuedo elements (:before, :after) on the containing div to hide the inner-element border-radius overflow...this is bad. Feel free to fix it. :-p
• The "slider" UI component should probably be a psuedo element so it can sit on-top of (z-index) the ON/OFF labels. Either the "ON" or "OFF" component would then be represented by the span element itself. You'll have to tweak the positioning quite a bit to get this to work.
• The CSS is an absolute mess and has only been tested in Chrome.

This was inspired by Damian Nicholson's blog post on the same topic.