html
<ul class="ios">
<li><input type="checkbox" name="Storage" id="date" /> 飞行模式 <label for="date"><em></em></label> </li>
<li> <input type="checkbox" name="Storage2" id="blance" checked /> 静音 <label for="blance"><em></em></label> </li>
</ul>
css
.ios {
margin: 0;
padding: 0;
}
.ios li {
clear: both;
line-height: 44px;
border-bottom: 1px solid #CCC;
list-style: none;
}
.ios input {
display: none;
}
.ios label {
width: 52px;
background: #CCC;
height: 28px;
border-radius: 14px;
float: right;
margin: 8px 10px 0 0;
box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
}
.ios label em {
width: 26px;
height: 26px;
float: left;
margin: 1px;
border-radius: 13px;
box-shadow: 2px 3px 8px rgba(0,0,0,.1);
background: #FFF;
transition: 0.1s;
}
.ios input:checked + label {
background: #2bb353;
}
.ios input:checked + label em {
margin: 1px 1px 1px 25px;
}
.ios input:disabled + label {
opacity: 0.5
}
效果
