纯CSS仿iOS开关按钮

纯CSS仿iOS开关按钮

效果图

思路

本质上就是一个checkbox，我们将checkbox隐藏掉，然后用label和其绑定
里面的小圆形可用伪元素来制作
当checkbox未被选中时，伪元素左浮动
当checkbox被选中时，伪元素右浮动，并改变label的背景颜色为绿色。

代码

<div class="box1"><input type="checkbox" name="first" id="btn1"><label for="btn1">label>
div>
<div class="box1"><input type="checkbox" name="first" id="btn2"><label for="btn2">label>
div>
<div class="box1"><input type="checkbox" name="first" id="btn3"><label for="btn3">label>
div>
<div class="box1"><input type="checkbox" name="first" id="btn4"><label for="btn4">label>
div>

/*css样式*/
.box1 input{display: none;
}
.box1 label{display: block;width: 50px;height: 24px;background-color: #eeeeee;border-radius: 14px;position: relative;cursor: pointer;
}.box1 label::after{content: "";position: absolute;width: 20px;height: 20px;background-color: #fff;border-radius: 50%;left: 2px;top: 2px;transition: all 0.1s;
}
/*input选中后的样式*/
.box1 input:checked + label{background-color: rgb(9, 224, 99);
}
.box1 input:checked + label::after{left: 28px;
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！