Below is my code snippet where I am attempting to select the radio button from the next group, but unfortunately it is not working as expected. Here is the code snippet:
input[type="radio"] {
display: none;
}
input[type="radio"]+label span {
display: inline-block;
width: 10px;
height: 10px;
background: transparent;
vertical-align: middle;
border: 2px solid #f56;
border-radius: 50%;
padding: 2px;
margin: 0 5px;
}
input[type="radio"]:checked+label span {
width: 10px;
height: 10px;
background: #f56;
background-clip: content-box;
}<div>
<input type="radio" id="pizza" name="bites" value="pizza">
<label for="male"><span></span>pizza</label><br>
<input type="radio" id="cake" name="bites" value="cake">
<label for="female"><span></span>cake</label><br>
</div>
<div>
<input type="radio" id="soda" name="liquid" value="soda">
<label for="male"><span></span>soda</label><br>
<input type="radio" id="water" name="liquid" value="water">
<label for="water"><span></span>water</label><br>
</div>