label+input实现按钮开关切换效果的实例
代码如下所示:
Document 主要使用label+input来实现改变left的值,下面是核心代码,意思就是
选中的input的兄弟节点.box下的.switch-btn元素的left会变成0px(原来是-37px);
.ipt:checked+.box.switch-btn{ left:0; }当然要配合transition来实现
下面是效果
代码如下所示:
Document 主要使用label+input来实现改变left的值,下面是核心代码,意思就是
选中的input的兄弟节点.box下的.switch-btn元素的left会变成0px(原来是-37px);
.ipt:checked+.box.switch-btn{ left:0; }当然要配合transition来实现
下面是效果
全部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; }