自定义收音机选择器不工作

Question

我已经为我的站点创建了这个自定义单选选择器，第一个单选选择器正在工作，但第二个字段没有选择。我是否需要创建另一个类，或者将每个输入命名为不同的ID，这样它们就不会相互冲突？我正在尝试为客户创建多个选项来选择一个选项。

input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
}
input[type=radio]:checked+label {
color: #fff;
background: #444;
border-radius: 5px;
}
label+input[type=radio]+label {
border-left: solid 3px #444;
}
.radio-group {
display: inline-block;
overflow: hidden;
}

<div class="radio-group">
<input type="radio" id="lessthan6months" name="timeline"><label for="lessthan6months">6 mo</label>
<input type="radio" id="6to12months" name="timeline"><label for="6to12months">6-12 mo</label>
<input type="radio" id="12to24months" name="timeline"><label for="12to24months">12-24 mo</label>
<div class="line"></div>
</div>
<div class="radio-group">
<input type="radio" id="tradein_y" name="tradein" value="Yes"><label for="trade in yes">Yes</label>
<input type="radio" id="tradein_n" name="tradein" value="No"><label for="trade in no">No</label>
<div class="line"></div>
</div>

Answer 1

label内容的for必须与input的id匹配。

这会起作用，就像这样：

input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
}
input[type=radio]:checked+label {
color: #fff;
background: #444;
border-radius: 5px;
}
label+input[type=radio]+label {
border-left: solid 3px #444;
}
.radio-group {
display: inline-block;
overflow: hidden;
}

<div class="radio-group">
<input type="radio" id="lessthan6months" name="timeline"><label for="lessthan6months">6 mo</label>
<input type="radio" id="6to12months" name="timeline"><label for="6to12months">6-12 mo</label>
<input type="radio" id="12to24months" name="timeline"><label for="12to24months">12-24 mo</label>
<div class="line"></div>
</div>
<div class="radio-group">
<input type="radio" id="tradein_y" name="tradein" value="Yes"><label for="tradein_y">Yes</label>
<input type="radio" id="tradein_n" name="tradein" value="No"><label for="tradein_n">No</label>
<div class="line"></div>
</div>