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

About these ads

31 comments

  1. 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.

  2. Thanks, great post! Can you tell me how you managed to prevent a fast double-click to “select” the text? I’ve been trying to implement a CSS toggle button myself and it behaves OK except for the text being selected as I switch quickly from ON to OFF. Any tips? Thanks.

    1. Thank you very much, Alain – I am glad you like the post. Regarding your question – a very easy way to disable selection is to apply user-select: none; to the element you want to set as unselectable. You should use -moz-user-select: none for Firefox and -webkit-user-select: none for Chrome, for example:

      .element
      {
      -moz-user-select: none;
      -webkit-user-select: none;
      user-select: none;
      }

      Internet Explorer does not support this property, but you can apply the unselectable=”on” attribute to the same element – it works the same as user-select:

      <div unselectable=”on”></div>

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s