CSS3 iPhone Toggle Buttons

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

Update: A new and better solution for iPhone style toggle buttons is available on this page.

On this page you will learn how to create cool iPhone toggle checkboxes and radio buttons with CSS3, minimal, semantic and accessible markup and no JavaScript at all.

Really, all you need is markup like this:

<div class="iphone-toggle-buttons">
    <ul>
        <li><label for="checkbox-0"><input type="checkbox" name="checkbox-0" id="checkbox-0" /><span>checkbox 0</span></label></li>
        <li><label for="checkbox-1"><input type="checkbox" name="checkbox-1" id="checkbox-1" checked="checked" /><span>checkbox 1</span></label></li>
    </ul>
</div>

And the rest will be done with the magic of CSS3’s generated content, attribute selectors and gradients.

Supported browsers:

  • Mozilla FireFox
  • Opera
  • Google Chrome
  • Apple Safari
  • Internet Explorer 9 (not fully supported)
  • Internet Explorer 10 Beta

Older browsers that do not support CSS generated content, gradients and attribute selectors fall back nicely showing the normal checkboxes and radio buttons.

Go and check it out here… Find more experiments here.

Related Posts