代码展示
<!DOCTYPE html>
<html>
<head>
<title>css编写开关按钮</title>
<style type="text/css">
.chooseBtn {
display: none;/*隐藏的是勾选的复选框*/
}
.choose-label {
/*box-shadow属性向框添加一个或多个阴影。可以使用 border-image-* 属性来构造漂亮的可伸缩按钮*/
box-shadow: #ccc 0px 0px 0px 1px;
width: 40px;/*按钮的宽度*/
height: 20px;
display: inline-block;
border-radius: 20px;
position: relative;
background-color: #bdbdbd;
overflow: hidden;
}
.choose-label:before {
content: '';
position: absolute;
left: 0;
width: 20px;
height: 20px;
display: inline-block;
border-radius: 20px;
background-color: #fff;
z-index: 20;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
/*加号（+）为：相邻同胞选择器*/
/*“+”是选择相邻兄弟，叫做“相邻兄弟选择器”。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器*/
.chooseBtn:checked + label.choose-label:before {/*:before 表示在元素之前插入新的内容*/
/*选择紧接在.chooseBtn元素后出现的.choose-label元素(需要满足.chooseBtn和.choose-label元素拥有共同的父元素)*/
left: 20px;
}
.chooseBtn:checked + label.choose-label {
background-color: #51ccee;
}
</style>
</head>
<body>
<input type="checkbox" name="sex" id="male" class="chooseBtn" />
<label for="male" class="choose-label"></label>
</body>
</html>
效果图展示
小提示
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。