php按钮开关,label+input实现按钮开关切换效果

label+input实现按钮开关切换效果html>

Document

.ipt {

display: none;

}

.box {

width: 74px;

height: 30px;

line-height: 30px;

overflow: hidden;

border: 1px solid #eee;

border-radius: 4px;

position: relative;

cursor: pointer;

}

label {display:inline-block;}

.ipt:checked + .box .switch-btn {

left: 0;

}

.switch-btn {

position: absolute;

left: -37px;

top: 0;

width: 111px;

height: 30px;

transition: all 0.5s;

}

.switch-btn span{

width: 37px;

height: 30px;

display: block;

text-align: center;

float: left;

font-size: 14px;

}

.on {

background: #52B13C;

color: white;

}

.white {

background: white;

}

.off {

background: #EEEEEE;

}

主要使用label+input来实现改变left的值,下面是核心代码，意思就是选中的input的兄弟节点.box下的.switch-btn元素的left会变成0px(原来是-37px);

.ipt:checked + .box .switch-btn {

left: 0;

}

当然要配合transition来实现

下面是效果

ON

OFF

全部css代码

.ipt {

display: none;

}

.box {

width: 74px;

height: 30px;

line-height: 30px;

overflow: hidden;

border: 1px solid #eee;

border-radius: 4px;

position: relative;

cursor: pointer;

}

.ipt:checked + .box .switch-btn {

left: 0;

}

.switch-btn {

position: absolute;

left: -37px;

top: 0;

width: 111px;

height: 30px;

transition: all 0.5s;

}

.switch-btn span{

width: 37px;

height: 30px;

display: block;

text-align: center;

float: left;

font-size: 14px;

}

.on {

background: #52B13C;

color: white;

}

.white {

background: white;

}

.off {

background: #EEEEEE;

}