使用 CSS3 编写切换按钮时，我们可以使用::after、::before和:checked这三个属性来实现切换按钮。
定义切换按钮页面容器
<div class="box">
<input type="checkbox" id="checkbox" class="toggle" />
<label for="check">开启</label>
</div>
样式实现步骤
1、设置 checkbox 单选框为透明并且设置相应的容器
input[type="checkbox"].toggle {
opacity: 0;
position: absolute;
top: -1000;
left: -1000;
z-index: 2;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
input[type="checkbox"].toggle + label {
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
2、通过::before和::after伪类设置相应的样式
input[type="checkbox"].toggle + label::before {
content: "";
width: 2em;
height: 1em;
background-color: #ffe9e9;
border-radius: 1em;
margin-right: 0.25em;
}
input[type="checkbox"].toggle + label::after {
display: flex;
justify-content: center;
align-items: center;
content: "\2715";
font-size: 0.5em;
left: 0.2em;
width: 1.8em;
height: 1.8em;
background-color: #ff4a4a;
border-radius: 1em;
position: absolute;
color: #fff;
}
3、设置单选按钮选中状态下label标签的样式
input[type="checkbox"].toggle:checked + label {
color: red;
}
4、使用::after和::before设置单选按钮选中状态下label标签的样式
input[type="checkbox"].toggle:checked + label::before {
background-color: #d4ffe7;
}
input[type="checkbox"].toggle:checked + label::after {
content: "\2713";
transform: translateX(100%);
background-color: #49e712;
}
5、添加动画优化效果
input[type="checkbox"].toggle + label::before {
transition: background-color 200ms ease-in-out;
}
input[type="checkbox"].toggle + label::after {
transition: background-color 200ms ease-in-out, transform 200ms ease-in-out;
}
总结
使用 CSS3 实现自定义切换按钮其实就几个步骤，其核心想法就是使用伪类来辅助设置切换前的原始和切换后的效果。