label+input实现按钮开关切换效果的实例

label+input实现按钮开关切换效果的实例

代码如下所示：

主要使用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;

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。