CSS Custom RadioButton not working [duplicate] - html

Question

This question already has an answer here:
Why are my show/hide styles not working when I click the radio button?
(1 answer)
Closed 4 years ago.
I'm making a simple custom radio button using CSS and I don't know why is not working as like a normal radio button. When I choose one, the other selected itself too (?).
/* Radio Button */
.radioBtn{
float: right;
margin-top: 30px;
height: 35px;
width: 35px;
border: solid 3px #d8aa00;
border-radius: 50%;
background: #fffbd8;
position: relative;
transition: .3s;
}
.radioBtn::after{
position: absolute;
width: 20px;
height: 20px;
background: #d8aa00;
border-radius: 50%;
content: '';
top: 7px;
left: 7px;
opacity: 0;
transition: .3s;
}
input[type=radio]:checked ~ .radioBtn::after {
opacity: 1;
}
input[type=radio]{
display: none;
}
<input id="radioBtn" type="radio" name="test">
<label class="radioBtn" for="radioBtn"></label>
<input id="radioBtn2" type="radio" name="test">
<label class="radioBtn" for="radioBtn2"></label>

Answer 1

Use + instead of ~ to target only the immediate sibling placed after and not all of them.
The + combinator selects adjacent siblings. This means that the second
element directly follows the first, and both share the same parent.ref
The ~ combinator selects siblings. This means that the second element
follows the first (though not necessarily immediately), and both share
the same parentref
/* Radio Button */
.radioBtn{
float: right;
margin-top: 30px;
height: 35px;
width: 35px;
border: solid 3px #d8aa00;
border-radius: 50%;
background: #fffbd8;
position: relative;
transition: .3s;
}
.radioBtn::after{
position: absolute;
width: 20px;
height: 20px;
background: #d8aa00;
border-radius: 50%;
content: '';
top: 7px;
left: 7px;
opacity: 0;
transition: .3s;
}
input[type=radio]:checked + .radioBtn::after {
opacity: 1;
}
input[type=radio]{
display: none;
}
<input id="radioBtn" type="radio" name="test">
<label class="radioBtn" for="radioBtn"></label>
<input id="radioBtn2" type="radio" name="test">
<label class="radioBtn" for="radioBtn2"></label>