Take the 2-minute tour ×

I'm looking for a iPhone like on/off switch that doesn't use images.

Something like this: http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html

but w/o using images. With CSS3 I don't see why images are required? Any one know of any options? Thanks

share|improve this question

3 Answers 3

up vote 0 down vote accepted

Here are a couple of tutorials for making Aristo-like elements:



They don't have that specific button you want, but it will help you design your own button in CSS3.

share|improve this answer

This is what you are looking for: http://proto.io/freebies/onoff/

A generator where you get the CSS3 and HTML after styling the toggle button (see end of page).

share|improve this answer
?? Does the on/off value of the button bind to the checkbox? Or am I missing something? –  Mike Cole Aug 13 '13 at 19:02
Yes, you can see it yourself on the page above. Open Scratchpad of Firefox and run: $('.onoffswitch-inner').click( function(){ alert($('input[name=onoffswitch]').is(':checked')); }); then click the on-off-button. –  Echt Einfach TV Aug 14 '13 at 12:23

Hi I found this example that uses unicode # and CSS3...But I'm afraid it's not iPhone style but hopefully it can help you with something the button is really good looking take a look if you have the chance


share|improve this answer

Your Answer


