Toggle Checkbox

CSS3 checkbox toggle input

by levan gongadze

HTML

<div class="paper-toggle">
	<input type="checkbox" id="wifi" name="wifi" class="switch" />
	<label for="wifi"></label>
</div>

CSS

.paper-toggle input:empty {
  display:none;
}

.paper-toggle 
{
	position: relative;
}

.paper-toggle input:empty ~ label:before, 
.paper-toggle input:empty ~ label:after
{
  position: absolute;
	display: block;
  content: ' ';
  -webkit-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}

.paper-toggle input:empty ~ label:before
{
    width: 45px;
    height: 24px;
    border-radius: 35px;
    background-color: #d2d2d2;
}

input.switch:empty ~ label:after
{
    top: 0px;
    left: 0px;
    background-color: #ffffff;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    -webkit-box-shadow: -1px 2px 6px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: -1px 2px 6px -1px rgba(0,0,0,0.75);
    box-shadow: -1px 2px 6px -1px rgba(0,0,0,0.75);
}

.paper-toggle input:checked ~ label:before
{
	background-color: #00b48c;
}

.paper-toggle input:checked ~ label:after
{
	left: 22px;
  background-color: #fff;
}