Я не могу выбрать радиокнопки после применения css

Question

Он по умолчанию относится к первому даже после выбора других двух.
Мой код: -

input[type=radio] { 
      display:none; 
} 


    input[type=radio] + label:before { 
      content: ""; 
      display: inline-block; 
      width: 35px; 
      height: 35px; 
      vertical-align:middle; 
      margin-right: 8px; 
      background-color: #DFF0EF; 
      box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .3); 
      border-radius: 4px; 
     } 

    input[type=radio]:checked + label:before { 
      content:"\2714"; 
      color:white; 
      background-color: #34E098; 
      font-size:1.5em; 
      text-align:center; 
      line-height:34px; 
      text-shadow:0px 0px 3px #eee; 

     } 

Мои кнопки: - https://codepen.io/coderguyinthehouse/pen/VjbdLd

Answer 1

Ваши идентификаторы должны быть уникальными и так for значение Ассоциированный наклеек.

EG

<input type="radio" id="sizeselected1" name="downloadsize" value="KB"> 
<label for="sizeselected1">1</label> 

input[type=radio] { 
 
      display:none; 
 
} 
 

 
input[type=radio] + label:before { 
 
     content: ""; 
 
     display: inline-block; 
 
     width: 35px; 
 
     height: 35px; 
 
     vertical-align:middle; 
 
     margin-right: 8px; 
 
     background-color: #DFF0EF; 
 
     box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .3); 
 
     border-radius: 4px; 
 
    } 
 

 
input[type=radio]:checked + label:before { 
 
     content:"\2714"; 
 
     color:white; 
 
     background-color: #34E098; 
 
     font-size:1.5em; 
 
     text-align:center; 
 
     line-height:34px; 
 
     text-shadow:0px 0px 3px #eee; 
 
     
 
    }

<form class="sizeselect" id="sizeselect" name="sizeselect"> 
 
    <input type="radio" id="sizeselected1" name="downloadsize" value="KB"><label for="sizeselected1">1</label> 
 
    <input type="radio" id="sizeselected2" name="downloadsize" value="MB"><label for="sizeselected2">2</label> 
 
    <input type="radio" id="sizeselected3" name="downloadsize" value="GB"><label for="sizeselected3">3</label> 
 
</form> 
 

 
<form class="speedselect" id="speedselect" name="speedselect"> 
 
    <input type="radio" id="speedselected1" name="downloadspeed" value="Kbps"><label for="speedselected1">11</label> 
 
    <input type="radio" id="speedselected2" name="downloadspeed" value="Mbps"> <label for="speedselected2">12</label> 
 
    <input type="radio" id="speedselected3" name="downloadspeed" value="Gbps"> <label for="speedselected3">13</label> 
 
</form>

Answer 2

Вы не можете использовать тот же идентификаторами

<form class="sizeselect" id="sizeselect" name="sizeselect"> 
<input type="radio" id="sizeselected1" name="downloadsize" value="KB" 
<label for="sizeselected1">1</label> 
<input type="radio" id="sizeselected2" name="downloadsize" value="MB" 
<label for="sizeselected2">2</label> 
<input type="radio" id="sizeselected3" name="downloadsize" value="GB" 
<label for="sizeselected3">3</label> 
</form> 

Аналогично для другой формы ... изменить идентификаторы.

Answer 3

Вы должны использовать уникальный идентификатор на вашем входе

<form class="sizeselect" name="sizeselect"> 
    <input type="radio" id="sizeselected1" name="downloadsize" value="KB"><label for="sizeselected1">1</label> 
    <input type="radio" id="sizeselected2" name="downloadsize" value="MB"><label for="sizeselected2">2</label> 
    <input type="radio" id="sizeselected3" name="downloadsize" value="GB"><label for="sizeselected3">3</label> 
</form> 

<form class="speedselect" name="speedselect"> 
    <input type="radio" id="speedselected11" name="downloadspeed" value="Kbps"><label for="speedselected11">11</label> 
    <input type="radio" id="speedselected12" name="downloadspeed" value="Mbps"> <label for="speedselected12">12</label> 
    <input type="radio" id="speedselected13" name="downloadspeed" value="Gbps"> <label for="speedselected13">13</label> 
</form> 

Answer 4

Поскольку вы используете пользовательские флажков, проверенное состояние срабатывает при нажатии на ярлык - но все этикетки предназначены для того же входа (sizeselected). Просто измените идентификаторы для каждого входа, и он будет работать так, как вы ожидаете!

<form class="sizeselect" id="sizeselect" name="sizeselect"> 
     <input type="radio" id="sizeselected" name="downloadsize" value="KB"> 
     <label for="sizeselected">1</label> 
     <input type="radio" id="sizeselected2" name="downloadsize" value="MB">   
     <label for="sizeselected2">2</label> 
     <input type="radio" id="sizeselected3" name="downloadsize" value="GB"> 
     <label for="sizeselected3">3</label> 
    </form> 

https://codepen.io/will0220/pen/KrmZqr