用 CSS3 实现切换按钮

使用 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 实现自定义切换按钮其实就几个步骤，其核心想法就是使用伪类来辅助设置切换前的原始和切换后的效果。

完整代码

完整代码示例下载