tobypitman.com

iPhone Style Checkboxes With CSS3

Here’s some form input checkboxes styled with CSS3 to look like iPhone style on/off buttons. Just messing about again with CSS3.

It’s all done with an input ‘checkbox’ an a couple of labels. There’s no javascript to add any classes and the on/off text is added using the :before and :after pseudo classes in CSS with generated content, there are also no images used. It should work cross browser although I haven’t tested IE and Opera. Shoudn’t take too much tweaking if you want to try, I just didn’t have time.

There’s some -webkit- animations for Chrome and Safari. The clever bit is using the label to switch the checkbox off and on using the ‘for’ attribute whick targets the ‘id’ of the checkbox. Like this:

<input id="1" checked="checked" name="1" type="checkbox" value="1" />
<label class="check" for="1"></label>

The label is then styled to have a different position using :checked. The checkbox itself is hidden.

input[type=checkbox]:checked + label.check {
    top: 0px;
    left: 38px;
}

This CSS looks at any checkbox that’s ‘checked’ and moves the next available label element with a class of ‘check’ 38px left. Pretty cool!! Check out the source for more detail! :)

View Demo

Ironically this doesn’t work on the iPhone!!?

P.S. This ‘experiment’ wasn’t intended to simulate any kind of ‘drag’ feature on the iPhone, it was just a try at making a pretty looking checkbox. It’s not a radiobox either, although you could probably use it for that too! All I was interested in was the CSS and just seeing if it was possible to achieve this kind of interface design without lots of extra bulky markup or JS. Sorry for any confusion or offence caused. :)

Update: Here’s a UI example that doesn’t look like the iPhone buttons. Maybe this is a bit clearer as to how it may be used.

View Demo

Posted on Sunday, June 20th, 2010 at 6:44 pm.

Filed under CSS, Web Design.

26 Responses to “iPhone Style Checkboxes With CSS3”

  1. Kevin Holesh says:

    It’s great that you did this in only CSS, but it isn’t very usable. It looks like it’s designed to be slid from side to side, but I can’t click and drag it. Also, I don’t understand why you would need this on something other than the iPhone or iPad. It will only confuse the user because it isn’t a standard form control they’re used to.

    • Toby says:

      Hi Kevin,
      I probably wouldn’t use it either! :) It was just done purely to see if it could be done.

      It could be used in a backend though for enabling CMS features. That’s a situation where the user might expect to see this kind of on/off switch.

  2. Peter says:

    Great, but the gray switch part is supposed to be drag-able.

  3. Hey Toby, this is awesome! Don’t let Kevin’s obviously jealous post get you down. The topic isn’t usability, so his view is irrelevant. Good stuff.

  4. Thiago says:

    This thing is pretty useful, of course! Thanks for sharing!

    Look at this site:
    http://www.launchlist.net/

    ;)

  5. John says:

    Ironically, I can’t click these check boxes on either my iPhone nor my iPad. Very pretty but no worky. :(

  6. If you want a switch, use radio buttons :)
    Checkboxes can be enabled both at the same time, which doesn’t really suit this situation.

  7. Raphael says:

    It’s a very usefull feature to have to create interfaces – essencially. The visual is very accurate and the effect catchy.

    Thx for share!

  8. Brian says:

    Just tried it with Firefox 3.6.4 -> it works fine!

    This button will work fine for owners of the iPhone, iTouch and the iPad. Although you can slide those buttons, tapping (clicking) works identically to your demo page.

    Nice work!

  9. Jim says:

    Great use of the :before and :after attributes!

    @niels Using radio buttons would require two radio input elements, this method only requires 1 checkbox. Turn off CSS to see.

    To all the peeps bitching bout dragging; this is a post about pushing CSS3. Dragging would be better solved with javascript, not CSS3.

  10. [...] more: iPhone Style Checkboxes With CSS3 « tobypitman.com 21 June 2010 | Uncategorized | Trackback | del.icio.us | Stumble it! | View Count : 0 Next Post [...]

  11. JasonH says:

    Hi Fella,
    Try making the whole area clickable and stick in a sliding transition!

  12. erica says:

    I really like that – a lot! Safari, Chrome and IE all look diff – but, now you have me curious. I think I might try this myself and play with it – just to see what else I can do. I have screenshots of the 3 browsers if you want them – just email me.

  13. erica says:

    oops let me clarify – the red and green section is diff in the browsers, not the blue version

  14. [...] Tutorial – iPhone Style Checkboxes with CSS3 [...]

  15. [...] Minimalistic Navigation MenuCSS3 Flying MenuScrollTo Posts With jQueryFancy Image Hover Using CSS3iPhone Style Checkboxes With CSS3GrooveShark Search with CSS3Create an Advanced Contact Form for Client InquiriesAwesome Recent [...]

  16. [...] iPhone Style Checkboxes With CSS3 « tobypitman.com (tags: ux toggle iphone checkbox) [...]

  17. [...] Tutorial – iPhone Style Checkboxes with CSS3 [...]

  18. Nice! Good work.

  19. oli says:

    nice, but “cursor: pointer” produces a better user experience

  20. Andrew says:

    This is an awesome idea! I love the use of the :checked selector. I may have to play around with this as I redesign my site.

  21. Cynthia says:

    Your CSS3 tutorials are amazing. I like them because they’re PURE CSS3, and because they are real-world practical examples that are useful. I tested your demos in Chrome and IE9 Beta. The jQuery style menu with CSS3 works very well, except that IE9 doesn’t recognize the rounded corners. But it does work well and it still looks good even though it’s square. The CSS3 slideshow works too, but without the slidey slidey. Thank you for some beautiful demos and tutorials!!

  22. [...] iPhone Style Checkboxes With CSS3 « tobypitman.com [...]

  23. CSS Library says:

    Thank you for this wonderful tutorial!

    Your tutorial is added to thecsslibrary.com