iPhone Style Checkbox

talmand

• 30078
• 14
• 2

iPhone style checkboxes made with CSS3 inspired by this.

Decided to see if I could do something similar with CSS only.

The basic idea is the label is the container with a checkbox that I hide. The label in this case takes over clickable duties. Then there's a span (class slider) that holds three elements, on display, off display and the block that separates them. Then I just move the the slider span based on the checkbox state. This changes the display state of the whole thing.

Related:

• CSS Only Solar System Model
• Minions in pure CSS
• Multiple Box Shadows
• Clicking Game
• CSS3 Room