使用多个单选按钮时无法选择选项

时间:2019-01-24 11:16:36

标签: html css html5 css3

我使用两个单选按钮来选择申请人的性别和申请人的孩子的性别,但这两个按钮都不起作用,有人可以帮助我吗? 我的代码在下面给出

         input[type=radio] {
         position: absolute;
         visibility: hidden;
         display: none;
        }
       label {
         color: #9a929e;
         display: inline-block;
         cursor: pointer;
          font-weight: bold;
         padding: 5px 20px;
       }
        input[type=radio]:checked + label {
        color: #ccc8ce;
        background: #675f6b;
        }
        <input type="radio" id="option-one" name="selector" checked>
        <label for="option-one">One</label>  
        <input type="radio" id="option-two" name="selector">
        <label for="option-two">Two</label>
        
        <input type="radio" id="option-one" name="selector_one" checked>
        <label for="option-one">One</label>  
        <input type="radio" id="option-two" name="selector_one">
        <label for="option-two">Two</label>

1 个答案:

答案 0 :(得分:2)

“ id”在html页面中只能使用一次。每个“ id”必须唯一。

input[type=radio] {
  position: absolute;
  visibility: hidden;
  display: none;
 }

label {
  color: #9a929e;
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  padding: 5px 20px;
}

input[type=radio]:checked + label {
  color: #ccc8ce;
  background: #675f6b;
}
<input type="radio" id="option-one" name="selector" checked>
<label for="option-one">One</label>  
<input type="radio" id="option-two" name="selector">
<label for="option-two">Two</label>

<input type="radio" id="option-one2" name="selector_one" checked>
<label for="option-one2">One</label>  
<input type="radio" id="option-two2" name="selector_one">
<label for="option-two2">Two</label>