微客导航 » 文章资讯 » label+input实现按钮开关切换效果的实例

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

2023-09-26 10:59:06 280

代码如下所示：







Document



主要使用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:1pxsolid#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:all0.5s;
}
.switch-btnspan{
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实现按钮开关切换效果的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐