Author: | nickdeny |
---|---|
Views Total: | 5,493 views |
Official Page: | Go to website |
Last Update: | May 24, 2017 |
License: | MIT |
Preview:

Description:
iOS-style on/off toggle switch implemented in pure HTML and CSS.
How to use it:
Create a normal checkbox for the iOS toggle button.
<input type="checkbox" id="demo">
Create a label element for the checkbox.
<label for="demo">Toggle On/Off</label>
The core CSS/CSS3 rules to transform the checkbox into an iOS-style toggle button.
[type="checkbox"]:not(:checked), [type="checkbox"]:checked { position: absolute; left: -9999px; } [type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label { position: relative; padding-left: 4em; padding-top: .25em; cursor: pointer; } [type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before, [type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after { content: ''; position: absolute; height: 1.5em; transition: all .5s ease; } [type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before { left: 0; top: 0; width: 3em; border: 2px solid #dddddd; background: #dddddd; border-radius: 1.1em; z-index: -1; } [type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after { left: .15em; top: .125em; background-color: #fff; border-radius: 50%; width: 1.5em; } [type="checkbox"]:checked + label:after { left: 1.65em; } [type="checkbox"]:checked + label:before { background-color: #72da67; border-color: #72da67; }