CSS3 iPhone-y toggle

In order to have an iOS-style toggle that scales nicely, I used a simple media query and a CSS3 widget for my company’s touch site.  Here’s an adaptation of it with my own Javascript; feel free to reuse the code as you wish.  The JS listens for clicks on the toggle and then toggles… pretty basic.  I do change the “aria-checked” property too, for those screenreaders that support it.

Future improvements I’d like to make: create helper functions to find a class name, add a class name, and remove a class name.  I’d also like to animate it, but am running into some issues with animating the :before pseudo selector.  To be explored later… for now:

http://eeblet.com/side-project/toggle.html