自定義單選按鈕：如何取消選中？ （複選框哈克）

Question

我創建了偉大的工作，一些自定義的複選框：

https://codepen.io/anon/pen/jwxXar

我試圖做同樣的單選按鈕。但是，如果一個單選按鈕是活動的，我點擊一個又一個的取消選中不起作用：

➤https://codepen.io/anon/pen/YQLdxd

自定義單選按鈕的CSS代碼

.radio { 
    position: relative; 
    margin-bottom: 10px; 
} 

.radio input[type="radio"] { 
    cursor: pointer; 
    height: 100%; 
    left: 0; 
    margin: 0; 
    opacity: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    z-index: 1; 
} 

.radio label {margin-left: 32px;} 

.radio label:before, 
.radio label:after { 
    content: ""; 
    display: block; 
    position: absolute; 
} 

.radio label:before { 
    background: #fff; 
    border: 1px solid #ccc; 
    border-radius: 50%; 
    height: 20px; 
    left: 0; 
    top: 4px; 
    width: 20px; 
} 

.radio label:after { 
    background: red; 
    border-radius: 50%; 
    height: 12px; 
    left: 5px; 
    opacity: 0; 
    pointer-events: none; 
    top: 9px; 
    width: 12px; 
} 

.radio input:checked ~ label:after {opacity: 1;} 

input[type="radio"]:checked + label:before { 
    border: 1px solid red; 
    box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 0 #fff, inset 0 0 0 16px #fff; 
    color: #fff; 
} 

自定義單選按鈕HTMLCode

<div class="radio"> 
    <input value="" type="radio"> 
    <label>Radio Button 1</label> 
</div> 
<div class="radio"> 
    <input value="" type="radio"> 
    <label>Radio Button 2</label> 
</div> 
<div class="radio"> 
    <input value="" type="radio"> 
    <label>Radio Button 3</label> 
</div> 
<div class="radio"> 
    <input value="" type="radio"> 
    <label>Radio Button 4</label> 
</div> 

有沒有人的CSS超級英雄有一個想法，爲什麼單選按鈕不工作？

Answer 1

你必須指定電臺的名稱：NAME = 「收音機」，同名爲組

.radio { 
 
    position: relative; 
 
    margin-bottom: 10px; 
 
} 
 

 
.radio input[type="radio"] { 
 
    cursor: pointer; 
 
    height: 100%; 
 
    left: 0; 
 
    margin: 0; 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    z-index: 1; 
 
} 
 

 
.radio label {margin-left: 32px;} 
 

 
.radio label:before, 
 
.radio label:after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
} 
 

 
.radio label:before { 
 
    background: #fff; 
 
    border: 1px solid #ccc; 
 
    border-radius: 50%; 
 
    height: 20px; 
 
    left: 0; 
 
    top: 4px; 
 
    width: 20px; 
 
} 
 

 
.radio label:after { 
 
    background: red; 
 
    border-radius: 50%; 
 
    height: 12px; 
 
    left: 5px; 
 
    opacity: 0; 
 
    pointer-events: none; 
 
    top: 9px; 
 
    width: 12px; 
 
} 
 

 
.radio input:checked ~ label:after {opacity: 1;} 
 

 

 
input[type="radio"]:checked + label:before { 
 
    border: 1px solid red; 
 
    box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 0 #fff, inset 0 0 0 16px #fff; 
 
    color: #fff; 
 
}

<div class="radio"> 
 
    <input value="" type="radio" name="radios"> 
 
    <label>Radio Button 1</label> 
 
</div> 
 
<div class="radio"> 
 
    <input value="" type="radio" name="radios"> 
 
    <label>Radio Button 2</label> 
 
</div> 
 
<div class="radio"> 
 
    <input value="" type="radio" name="radios"> 
 
    <label>Radio Button 3</label> 
 
</div> 
 
<div class="radio"> 
 
    <input value="" type="radio" name="radios"> 
 
    <label>Radio Button 4</label> 
 
</div>

Answer 2

沒有錯，你的CSS的所有無線電。在收音機中唯一需要注意的是，單選按鈕始終在組中工作。所以你必須給他們的域名（name attribute）

<div class="radio"> 
    <input value="" type="radio" name="rb1"> 
    <label>Radio Button 1</label> 
</div> 
<div class="radio"> 
    <input value="" type="radio" name="rb1"> 
    <label>Radio Button 2</label> 
</div> 
<div class="radio"> 
    <input value="" type="radio" name="rb1"> 
    <label>Radio Button 3</label> 
</div> 
<div class="radio"> 
    <input value="" type="radio" name="rb1"> 
    <label>Radio Button 4</label> 
</div>