css - 使用 css 自定义单选按钮

Question

我一直在尝试自定义默认单选按钮，使其看起来像开/关按钮。
我已经使用 2 个图像(使用 javascript)为开和关状态创建了一个，但是没有用于在两种状态之间转换的动画。

有没有办法使用纯 css(+ 动画)来实现这一点？

我需要这样的按钮-

Answer 1

给你，你也可以用复选框来做到这一点

#mc, #mc2, #mc3 {
  display: none;
}
.switch {
  background: gray;
  width: 40px;
  height: 20px;
  border-radius: 10px;
  display: block;
  position: relative;
  margin: 10px;
}
.switch:hover {
  cursor: pointer
}
.switch:after {
  content: "";
  height: 18px;
  width: 18px;
  border-radius: 9px;
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  background: lightblue;
  transition: ease-out 0.5s;
}
input[type=radio]:checked + label:after,
input[type=checkbox]:checked + label:after{
  left: calc(100% - 19px);
  background: lightgreen;
  }

<p>Radio</p>
<input type="radio" id="mc" name="Switch" />
<label class="switch" for="mc"></label>

<input type="radio" id="mc2" name="Switch" />
<label class="switch" for="mc2"></label>
<p>Checkbox</p>
<input type="checkbox" id="mc3" name="Switch" />
<label class="switch" for="mc3"></label>