效果预览：
代码如下：
<style> #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.4s;/*transition过度，时间为0.4秒*/ }
/*
以下是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: rgb(43, 180, 77); } </style>
<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>
知识点：
1.label中的for跟input的id绑定。作用是在点击label时选中input或者取消选中input
2.(:checked + 紧邻其后面标签) 的选择器。例如：#toggle-button:checked + label 解释：当id为toggle-button的checked为选中状态时，就选择紧邻其后的label标签
3.user-select: none;这个属性用来阻止页面文字被选中，如果不添加此属性，点击切换开关时，开/关 二字有时候会被选中，出现蓝色背景，如下图：
