自定义switch开关
自定义一个switch开关
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>theSwitch</title>
<style>
.label-switch {
}
#checkBox {
display: none;
}
.checkBox {
width: 52px;
height: 32px;
border-radius: 16px;
box-sizing: border-box;
background: #d8d8d8;
position: relative;
}
#checkBox:checked + .checkBox {
background: #00b4ff;
}
#checkBox:checked + .checkBox::before {
transform: translateX(22px);
transition-duration: 300ms;
}
.checkBox::before {
width: 28px;
height: 28px;
border-radius: 28px;
background: #ffffff;
position: absolute;
top: 2px;
left: 1px;
content: " ";
transform: scale(1);
box-sizing: border-box;
transform: translateX(0);
transition-duration: 300ms;
}
</style>
</head>
<body>
<label class="label-switch">
<input type="checkbox" id="checkBox"/>
<div class="checkBox" for="checkBox"></div>
</label>
</body>
</html>
