使用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>

做到這一點