I can't select radio buttons after applying css - css

Question

It defaults to the first one even after selecting other two.
My Code:-
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;
}
My Buttons:-
https://codepen.io/coderguyinthehouse/pen/VjbdLd

Answer 1

Your IDs need to be unique and so the associated labels' for value.
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

You can't use same ID's
<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>
Similarly for other form...change the ids.

Answer 3

You need to use unique id on your input
<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

Since you're using custom checkboxes, the checked state is triggered when you click the label - but all of the labels are for the same input (sizeselected). Just change the IDs for each input and it'll work as you expect it to!
<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