<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
一下例子中在input设置了display: none;后还能获得焦点这个问题困扰了我好一会
<!DOCTYPE html> <html>
<head> <title>cess练习</title> <style> .switch { position: relative; display: inline-block; width: 60px; height: 34px; }
.switch input { display: none; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ff00ff; -webkit-transition: .4s; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }
input:checked+.slider { background-color: #2196F3; }
input:focus+.slider { box-shadow: 0 0 1px #2196F3; }
input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }
/* Rounded sliders */ .slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; } </style> </head>
<body> <h2>开关切换</h2>
<label class="switch"> <input type="checkbox"> <div class="slider"></div> </label>
<label class="switch"> <input type="checkbox" checked> <div class="slider"></div> </label><br><br>
<label class="switch"> <input type="checkbox"> <div class="slider round"></div> </label>
<label class="switch"> <input type="checkbox" checked> <div class="slider round"></div> </label> </body>
</html>