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.
[...] = "#000000"; google_color_url = "#3399FF"; google_ui_features = "rc:0"; Source: http://acidmartin.wordpress.com/2011/06/18/css3-iphone-toggle-buttons/ Tags: blue, buttons, checkboxes, css, css3, [...]
Technically the switch control in iOS is the same as a checkbox. It’s therefore wrong to use it as a radio button group. For that iOS provides the selection list, which is a type of tableview whose cells display a check mark when selected. Only one cell of the tableview can be selected.
Hi Robert, technically you are right, but the idea of the blogpost was to demonstrate that this approach could be used both with check boxes and radio buttons.