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:

[html]
<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>
[/html]

… 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

• Semtex HTML5, CSS3 and JavaScript UI Framework
• HTML5, CSS3 and JavaScript iPhone Toggle Buttons
• Crossbrowser Image Reflections JavaScript Widget
• CSS3 Treeview. No JavaScript.
• HTML5 Resume Generator and Onepager Website
• CSS3 Driven Slides Viewer Without any JavaScript
• Fully Functional CSS3-only Tabstrip Without JavaScript
• Imageless CSS3 Custom Checkboxes and Radio Buttons
• Creating Gaussian Blur Effect With CSS3
• Selecting only the first element occurence out of siblings with the same class name with CSS3
• CSS3 Element Reflections
• Fancy CSS3 Toolips (Yeah, Without Any JavaScript)
• CSS3 Background Image Cropping