iOS 7 Checkbox

by anup1986

HTML

<input class="switch" type="checkbox" name="toggle" id="toggle">
<label for="toggle"></label>

CSS

body {
    background: #ccc;
}

input.switch {
max-height: 0;
max-width: 0;
opacity: 0;
}

input.switch + label {
display: block;
position: relative;
box-shadow: inset 0 0 0px 1px #d5d5d5;
text-indent: -5000px;
height: 30px;
width: 50px;
border-radius: 15px;
    background: #fff;
}

input.switch + label:before {
content: "";
position: absolute;
display: block;
height: 30px;
width: 30px;
top: 0;
left: 0;
border-radius: 15px;
background: rgba(19,191,17,0);
-moz-transition: .25s ease-in-out;
-webkit-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}

input.switch + label:after {
content: "";
position: absolute;
display: block;
height: 30px;
width: 30px;
top: 0;
left: 0px;
border-radius: 15px;
background: white;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.2);
-moz-transition: .25s ease-in-out;
-webkit-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}

input.switch:checked + label:before {
width: 50px;
background: rgba(19,191,17,1);
}

input.switch:checked + label:after {
left: 20px;
box-shadow: inset 0 0 0 1px rgba(19,191,17,1), 0 2px 4px rgba(0,0,0,.2);
}