CSS3 iOS-ish toggle for Mobile Web

Try making the browser window smaller -- by changing the base font size of the toggle with a media query, the widget shrinks responsively.

The dom structure is set up for localization of text, so that typically the first 3 letters show and the rest is hidden.

Note: I didn't bother with vendor prefixes for most CSS3 declarations (box-shadow, border-radius, and text-shadow), for ease of copying and readability. For most purposes, you'll probably want to add these prefixes.

« Back to the blog post

ON OFF