CODEWITHSUNDEEP
htmlcss
Manjusha K Vijayan
Manjusha K Vijayan

Reputation: 91

cannot select option when multiple radio buttons are used

I have used two radio buttons to select the gender of applicant and gender of applicant's child.But both of them does not works.Can anyone help me with this? My codes are given below

         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>

Upvotes: 0

Views: 44

Answers (1)

doğukan
doğukan

Reputation: 27381

An "id" can be used only once in an html page. Each "id" must be unique.

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>

Upvotes: 2

Related Questions