how to fix a problem with radio input costumized with css? - css

Question

I am doing an input radio customized with everything I learned about it step by step.
When I click on the older/standard radio inputs (without hiding them yet) everything is fine, I click on the old radio buttons and the new customized respective is checked.
But when I click on the newly customized radio buttons, they don't work as supposed to be.
The problem is that when I click the 2nd and 3rd customized radio it checks the 1rst automatically.
I really need your help because I don't know where I am failing. I already look from examples codes on the internet and it was exactly what I did so I don't really understand where is the problem that I should correct.
.content {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.items {
display: flex;
}
label {
display: flex;
align-items: center;
margin-left: 1rem;
}
.radio__span {
width: 1.2rem;
height: 1.2rem;
border-radius: 50%;
border: 3px solid #049372;
margin-right: .5rem;
display: flex;
align-items: center;
justify-content: center;
}
.radio:checked+.radio__span::before {
content: "";
display: block;
width: .8rem;
height: .8rem;
border-radius: 50%;
background-color: #049372;
}
/* .radio{
width:0;
height:0;
opacity:0;
visibility:hidden;
} */
<div class="content">
<div class="items">
<label for="chk">
<input type="radio" name="dev" class="radio" id="chk">
<span class="radio__span"></span>
<p>Frontend</p>
</label>
<label for="chk">
<input type="radio" name="dev" class="radio" id="chk">
<span class="radio__span"></span>
<p> Backend</p>
</label>
<label for="chk">
<input type="radio" name="dev" class="radio" id="chk">
<span class="radio__span"></span>
<p>Fullstack</p>
</label>
</div>
</div>
I expect to click on the new radio buttons and be checked.

Answer 1

IDs must be unique. Once fixed, you need to then update your label elements to point to the new IDs. Fix that and it works fine.
.content {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.items {
display: flex;
}
label {
display: flex;
align-items: center;
margin-left: 1rem;
}
.radio__span {
width: 1.2rem;
height: 1.2rem;
border-radius: 50%;
border: 3px solid #049372;
margin-right: .5rem;
display: flex;
align-items: center;
justify-content: center;
}
.radio:checked+.radio__span::before {
content: "";
display: block;
width: .8rem;
height: .8rem;
border-radius: 50%;
background-color: #049372;
}
/* .radio{
width:0;
height:0;
opacity:0;
visibility:hidden;
} */
<div class="content">
<div class="items">
<label for="chk1">
<input type="radio" name="dev" class="radio" id="chk1">
<span class="radio__span"></span>
<p>Frontend</p>
</label>
<label for="chk2">
<input type="radio" name="dev" class="radio" id="chk2">
<span class="radio__span"></span>
<p> Backend</p>
</label>
<label for="chk3">
<input type="radio" name="dev" class="radio" id="chk3">
<span class="radio__span"></span>
<p>Fullstack</p>
</label>
</div>
</div>

Answer 2

That is happening because of your for attribute which is looking for an input with an Id named chk, as you have got all three checkboxes with the same ID, it is checking the first...
The following would work:
.content {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.items {
display: flex;
}
label {
display: flex;
align-items: center;
margin-left: 1rem;
}
.radio__span {
width: 1.2rem;
height: 1.2rem;
border-radius: 50%;
border: 3px solid #049372;
margin-right: .5rem;
display: flex;
align-items: center;
justify-content: center;
}
.radio:checked+.radio__span::before {
content: "";
display: block;
width: .8rem;
height: .8rem;
border-radius: 50%;
background-color: #049372;
}
<div class="content">
<div class="items">
<label for="chk">
<input type="radio" name="dev" class="radio" id="chk">
<span class="radio__span"></span>
<p>Frontend</p>
</label>
<label for="chk1">
<input type="radio" name="dev" class="radio" id="chk1">
<span class="radio__span"></span>
<p> Backend</p>
</label>
<label for="chk2">
<input type="radio" name="dev" class="radio" id="chk2">
<span class="radio__span"></span>
<p>Fullstack</p>
</label>
</div>
</div>