CSS3 iPhone Toggle Buttons

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

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">
        <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>

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

Supported browsers:

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

Categories and Tags

© 2006 - 2023 Martin Ivanov