why my CSS custom radio button doesn't work? - html

Question

I try to make radio button by myself,But it doesn't work after I click label or the input radio button.
my code as bellow.
.radio input[type="radio"] {
display: none;
}
.radio {
margin-left: 5px;
position: relative;
padding-left: 22px;
}
.radio span {
width: 18px;
height: 18px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
position: absolute;
display: inline-block;
left: 0;
top: 5px;
}
.radio span::after {
content: "";
width: 16px;
height: 16px;
background-color: #448899;
border-radius: 50%;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
}
.radio input[type="radio"]:checked ~ .radio span::after {
transform: translate(-50%, -50%) scale(1);
}
<label class="radio">
<span></span><input type="radio" name="time" value="2000" id="morning" required />
上半天
</label>
<label class="radio">
<span></span><input type="radio" name="time" value="2500" id="afternoon" />
下半天
</label>
Even if I connect radio checked to another element,it still doesn't work.

Answer 1

Update the code as follows.
.radio {
display: flex;
align-items: center;
margin-left: 5px;
position: relative;
padding-left: 22px;
margin-bottom: 10px;
cursor: pointer;
}
.radio input[type="radio"] {
position: absolute;
opacity: 0;
z-index: -1;
}
.radio span {
width: 18px;
height: 18px;
background-color: rgba(255, 255, 255, 1);
border: 1px solid #484848;
border-radius: 50%;
position: absolute;
display: inline-block;
left: 0;
}
.radio span::after {
content: "";
width: 16px;
height: 16px;
background-color: #448899;
border-radius: 50%;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
}
.radio input[type="radio"]:checked ~ span::after {
transform: translate(-50%, -50%) scale(1);
}
<label class="radio">
<input type="radio" name="time" value="2000" id="morning" required />
<span></span>
上半天
</label>
<label class="radio">
<input type="radio" name="time" value="2500" id="afternoon" />
<span></span>
下半天
</label>