使用css自定义单选按钮

Question

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

有没有办法实现这个使用纯CSS（+动画）？

我需要像按钮these-

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>

做到这一点