<!-- 开关按钮 -->
<p class="btn-on" onclick="on_off()">
<!-- 圆点 -->
<span class="btn-on-circle"></span>
<!-- 文字 -->
<span class="btn-on-text">ON</span>
</p>
<script>
function on_off(type){
var btn = document.getElementsByClassName("btn-on")[0];
var circle = document.getElementsByClassName("btn-on-circle")[0];
var text = document.getElementsByClassName("btn-on-text")[0];
if(!type){
btn.style= "background-color: #ccc;"
circle.style="left: 40px;background-color: #888;box-shadow: 0 0 10px #888;";
text.style="right: 30px;color: #888;";
text.innerText="OFF";
} else {
btn.style= ""
circle.style="";
text.style="";
text.innerText="ON";
}
btn.setAttribute("onclick", "on_off(" + !type + ")"); // 修改状态
}
on_off(false)// 关闭按钮
</script>
<style>
/* 开关按钮 */
.btn-on{
width: 60px;
height: 25px;
margin: 0 3px;
border-radius: 25px;
font-size: 14px;
}
.btn-on{
cursor: pointer;
position: relative;
border: 1px solid white;
background-color: #12B090;
}
.btn-on-circle{
position: absolute;
width: 15px;
height: 15px;
top: 5px;
left: 5px;
background-color: rgb(255, 255, 255);
border-radius: 50%;
box-shadow: 0 0 10px white;
transition: all .5s;
}
.btn-on-text{
position: absolute;
right: 10px;
line-height: 25px;
color: white;
transition: all .5s;
}
</style>
上面是一个通过js控制样式实现改变状态的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.btnArea{
display: flex;
flex-direction: row;
margin-bottom: 16px;
}
.btnArea{
margin-left: 0;
}
.set{
position: relative;
width: 142px;
line-height: 36px;
letter-spacing: 0;
text-align: center;
font-size: 15px;
background-color: #ffffff;
}
.set input[type="checkbox"]{
display: none;
}
.set label{
display: block;
box-sizing: border-box;
height: 36px;
border: 2px solid red;
border-radius: 18px;
}
.set label span:after{
content: "off";
padding: 0 0 0 21px;
color: #666666;
font-weight: bold;
}
.set.setCircle{
position: absolute;
width: 28px;
height: 28px;
background: blueviolet;
top: 4px;
left: 4px;
border-radius: 14px;
transition: .2s;
}
.set input[type="checkbox"]:checked+label span:after{
content: "on";
padding: 0 21px 0 0;
color: chartreuse;
font-weight: bold;
}
.set .setCircle{
position: absolute;
width: 28px;
height: 28px;
background: #666666;
top: 4px;
left: 4px;
border-radius: 14px;
transition: .2s;
}
.set input[type="checkbox"]:checked+label span:after{
content:"on" ;
padding: 0 21px 0 0;
color: chartreuse;
font-weight: bold;
}
.set input[type="checkbox"]:checked+label span:after{
border-color:#3367DA ;
}
.set input[type="checkbox"]:checked~ .setCircle{
transform: translateX(100px);
background: gold;
}
</style>
</head>
<body>
<div class="btnArea">
<div class="set">
<input type="checkbox" id="xiaobiesan"><label for="xiaobiesan"><span></span></label>
<div class="setCircle"></div>
</div>
</div>
</body>
</html>
上面是通过纯css样式 通过对checkbox的状态实现checkbox是多选框 通常是有 checked和没被check状态 两种情况对应两种样式
label 通过id绑定input的多选框