ios7 style switch
CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
ios7-switch.css
ios7-switch.modernizr.css
test.htm

README.md

iOS7 style switch

Check out the demo

iOS7 style switch

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!