HTML Checking sibling radio button is checked [duplicate] - html

Question

This question already has answers here:
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
(3 answers)
Is there a "previous sibling" selector?
(30 answers)
Closed 2 years ago.
So i have this assignment where i need to make a custom radio button that if checked then a success logo come out.
i succeed to create the box but not the content i first though its the real radio button not working but after i turn up the opacity(i use opacity to hide the real one in case this didn't clear enough) the real radio button work. i try asking my senior he didn't really answer my question
here's the html
<label for="Viridian">
<span class="checkbox"></span>
Viridian
<input type="radio" id="Viridian" name="color" value="Viridian" checked="checked">
</label>
and here's the css
.checkbox {
display: block;
width: 18px;
height: 18px;
cursor: pointer;
margin-right: 2vh;
border: solid 1px white;
}
input ~ .checkbox::after {
content: '';
vertical-align: middle;
font-size: 15px;
text-align: center;
}
input:checked ~ .checkbox::after {
content: 'a';
}

Answer 1

I think this is what you're looking for.
HTML:
<p>
<input type="radio" id="test3" name="radio-group">
<label for="test3">Orange</label>
</p>
CSS:
[type="radio"]: checked,
[type="radio"]: not(: checked) {
position: absolute;
left: -9999px;
}
[type="radio"]: checked+label,
[type="radio"]: not(: checked)+label {
position: relative;
padding - left: 28px;
cursor: pointer;
line - height: 20px;
display: inline - block;
color: #666;
}
[type="radio"]: checked+label: before,
[type="radio"]: not(: checked)+label: before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 1px solid #ddd;
border - radius: 100 %;
background: #fff;
}
[type="radio"]: checked+label: after,
[type="radio"]: not(: checked)+label: after {
content: '';
width: 12px;
height: 12px;
background: #F87DA9;
position: absolute;
top: 4px;
left: 4px;
border - radius: 100 %;
-webkit - transition: all 0.2s ease;
transition: all 0.2s ease;
}
[type="radio"]: not(: checked)+label: after {
opacity: 0;
-webkit - transform: scale(0);
transform: scale(0);
}
[type="radio"]: checked+label: after {
opacity: 1;
-webkit - transform: scale(1);
transform: scale(1);
}