CSS3仿IOS滑动开关按钮

html

• 飞行模式
• 静音

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

}

效果