自定义单选按钮:如何取消选中?(复选框黑客)

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="radios"，组的所有无线电的名称相同

.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>