我為我的站點創建了這個自定義無線電選擇器，第一個無線電選擇器正在作業，但第二個欄位沒有選擇。是否需要創建另一個類或將每個輸入命名為不同的 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>uj5u.com熱心網友回復：
內容的必須與for的相label匹配。idinput
這將起作用，如下所示：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/519370.html
上一篇：a中不同高度的元素