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

}

效果