iOS7 style switch

Check out the demo

Features:

• no shitty scripts, pure CSS,
• the most accurate behavior, includes :active state styles,
• made with ems, sizes approprietaly to the font size,
• accessible from keyboard.

Usage

Grab the css. Use it!

Markup

<label class="ios7-switch">
    <input type="checkbox" checked>
    <span></span>
</label>

or

<label class="ios7-switch">
    <input type="checkbox" checked>
    <span></span>
    Mah shitty option!
</label>

or something else, you get the idea.

Caveats

Doesn't work in older browsers with no box-shadow support (IE8 and lower, Android 3.x and lower). It's easy enough to make a fallback to regular checkboxes. For instance, using Modernizr test

Modernizr.addTest('unprefixed-boxshadow', Modernizr.testProp('boxShadow', '1px 1px', true));

and modified stylesheet -- ios7-switch.modernizr.css.

Has some rounding error problems in some browsers at some font sizes. Tweak the font size a bit to get rid of those.

License

You kiddin me, it's 100 rows of CSS, just use it already! Ok, here's some text for ya: CC0 1.0. Shit, I'm so generous!