[英]Custom radio selector not functioning
I've created this custom radio selector for my site and the first radio selector is working but the 2nd field isn't selecting.我为我的网站创建了这个自定义单选选择器,第一个单选选择器工作正常,但第二个字段没有选择。 Is there another class that I need to create or have each input named a different ID so they don't conflict with one another?我是否需要创建另一个 class 或让每个输入命名为不同的 ID,以便它们不会相互冲突? I'm trying to create multiple options for a customer to select an option.我正在尝试为客户创建多个选项 select 一个选项。
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>
The for
of the label
content has to match the id
of the input
. label
内容的for
必须与input
的id
相匹配。
This will work, like this:这将起作用,如下所示:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.