纯css编写开关按钮点击切换

原文地址：
https://www.cnblogs.com/dinghuihua/p/6674106.html
整理：一个英语专业的程序员

效果图预览：

image

完整代码如下：

    
   
    
        
        开
        关
    

知识点：

1.label中的for跟input的id绑定。作用是在点击label时选中input或者取消选中input

2.(:checked + 紧邻其后面标签) 的选择器。例如：#toggle-button:checked + label 解释：当id为toggle-button的checked为选中状态时，就选择紧邻其后的label标签

3.user-select: none;这个属性用来阻止页面文字被选中，如果不添加此属性，点击切换开关时，开/关 二字有时候会被选中，出现蓝色背景，如下图：

image