Screen Shot 2013-09-17 at 3.59.03 PM

iOS 7 style checkboxes comparison

Apple overhauled their iOS UI and finally settled somewhere between Android 4 and

Windows 8 but in white. Still more 3D and material look than Windows 8.

And now that’s why I hate Webapps that try to look like native app:¬†All Phonegaps apps need heavy UI updates now to not look like your typical Android app.

So for a project we do some views in HTML and the rest as native app. To make it look over the top, I searched for already made iOS 7 style toggles.

  1. Pure CSS, no drag, animated, neat HTML:

    http://codepen.io/joshnh/pen/hjbuH

  2. Pure CSS, no drag, animated, a bit more grey, a bit more HTML

    http://codepen.io/daneden/pen/cmIHG

I sadly found not a single drag-able checkbox switch :-( Anyways the winner is Number 1, because it has the cleaner HTML:

 

A collection of more CSS 3 switches, but not in iOS 7 style:
http://bashooka.com/coding/pure-css-toggle-switches/

 

One thought on “iOS 7 style checkboxes comparison”