效果图预览完整代码如下
纯css编写开关按钮点击切换
效果图预览
完整代码如下
<!DOCTYPE html> <html> <head> <title>纯css编写开关按钮点击切换</title> <style type="text/css"> #toggle-button{ display: none; } .button-label{ position: relative; display: inline-block; width: 80px; background-color: #ccc; border: 1px solid #ccc; border-radius: 30px; cursor: pointer; } .circle{ position: absolute; top: 0; left: 0; width: 30px; height: 30px; border-radius: 50%; background-color: #fff; } .button-label .text { line-height: 30px; font-size: 18px; /* 用来阻止页面文字被选中,出现蓝色 可以将下面两行代码注释掉来查看区别 */ -webkit-user-select: none; user-select: none; } .on { color: #fff; display: none; text-indent: 10px; } .off { color: #fff; display: inline-block; text-indent: 53px; } .button-label .circle{ left: 0; transition: all 0.3s;/*transition过度,时间为0.3秒*/ } /* 以下是checked被选中后,紧跟checked标签后面label的样式。 例如:div+p 选择所有紧接着<div>元素之后的<p>元素 */ #toggle-button:checked + label.button-label .circle{ left: 50px; } #toggle-button:checked + label.button-label .on{ display: inline-block; } #toggle-button:checked + label.button-label .off{ display: none; } #toggle-button:checked + label.button-label{ background-color: #33FF66; } </style> </head> <body> <input type="checkbox" id="toggle-button"> <!--label中的for跟input的id绑定。作用是在点击label时选中input或者取消选中input--> <label for="toggle-button" class="button-label"> <span class="circle"></span> <span class="text on">开</span> <span class="text off">关</span> </label> </body> </html>
知识点
1. label中的for跟input的id绑定。作用是在点击label时选中input或者取消选中input
2. (:checked + 紧邻其后面标签) 的选择器。例如:#toggle-button:checked + label 解释:当id为toggle-button的checked为选中状态时,就选择紧邻其后的label标签
3. user-select: none;这个属性用来阻止页面文字被选中,如果不添加此属性,点击切换开关时,开/关 二字有时候会被选中,出现蓝色背景,如下图:
以上就是纯css编写开关按钮点击切换效果实现的详细内容,更多关于css开关按钮点击切换的资料请关注好代码网其它相关文章!