Pure CSS3 iOS switch checkbox

A switch allows the user to quickly toggle between two possible states: on and off. It’s the checkbox for iOS apps. It is possible to customize the color for the on and off states, but the appearance of the toggle button and size of the switch are set and cannot be changed.

You can use this element in a simple, fast and easy way with the following technique — it just really need 1 input element and CSS, pure CSS3 properties.

1. I will now show how classes are doing their own job, but first the HTML element, an inputtype checkbox because we will need the :checked CSS pseudo-class:
   <input class="apple-switch" type="checkbox">
2. Styling the element to get the inactive look:
   input.apple-switch {
position: relative;
appearance: none; outline: none;
width: 50px; height: 30px;
background-color: #ffffff; border: 1px solid #D9DADC;
border-radius: 50px; box-shadow: inset -20px 0 0 0 #ffffff;
transition-duration: 200ms;
}
3. The switch circle originally has a little and smooth shadow, that I styled with a pseudo-element:
   input.apple-switch:after {
content: "";
position: absolute;
top: 1px; left: 1px;
width: 26px; height: 26px;
background-color: transparent;
border-radius: 50%; box-shadow: 2px 4px 6px rgba(0,0,0,0.2);
}
4. Now the checked element styling
   input.apple-switch:checked {
border-color: #4ED164;
box-shadow: inset 20px 0 0 0 #4ED164;
}
5. And finally the circle shadow that change direction as well
   input.apple-switch:checked:after {
left: 20px;
box-shadow: -2px 4px 3px rgba(0,0,0,0.05);
}

Here’s the pen to check how this work

Give it a try and start now to implement this technique and don’t use more unnecessary javascript plugins that only consumes browser resources, increasing complexity of every website frontend development.

A switch allows quickly toggle between two possible states: on and off.

Conclusion

Pretty easy, fast and with no margin for errors nor cross-browsing issues, you just need to add the right vendor-prefixed to the properties that aren’t fully defined by W3C.

Enjoy, hope this can inspire you to have new and innovative ideas and that you can apply them to your day job! Cheers to you and good luck.

About the author

Pedro M. S. Duarte passioned designer and front-end developer from Lisbon, Portugal. Almost 20 years experience in the design field going from editorial to graphics and then to digital, since 2009 he has been designing high impact websites for the hotel industry. Has an observable desire to question and challenge design, trends and technology. Loves diving into usability research, evaluations and testing. Design and develop for multiple devices using responsive design principals, user-focus design and accessibility.

http://css.land

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.