I have been attempting to customize the appearance of radio buttons, but I am encountering issues with the checked pseudo-class. Interestingly, the hover effect is working perfectly. Although this is just a small section of a larger form, I am focusing on getting this part right before implementing it elsewhere. I believe I have included all the necessary code, but I can provide more if required. Thank you!
<div class="form-group__radio-item">
<label for="yes" class=form-group__radio-label>Yes
<input name="data-radios" class="form-group__radio-input" id="yes" type="radio">
<span class="form-group__radio-button"></span>
</label>
</div>
<div class="form-group__radio-item">
<label for="no" class=form-group__radio-label>No
<input type="radio" name="data-radios" class="form-group__radio-input" id="no">
<span class="form-group__radio-button"></span>
</label>
</div>
&__radio-group {
display: flex;
flex-direction: row;
justify-content: space-around;
}
&__radio-label {
font-family: $theme;
position: relative;
font-weight: 400;
font-size: 0.875rem;
color: $colorLightGray;
margin-right: 2px;
padding-bottom: 1rem;
user-select: none;
}
&__radio-box {
margin: 0 1rem 0 1rem;
}
&__radio-item {
padding-bottom: 0.5rem;
}
&__radio-input {
margin-right: 0.5rem;
margin-bottom: 1rem;
}
&__radio-input:checked + &__radio-button{
background-color: blue;
}
&__radio-input:hover + &__radio-button {
background-color: green;
}
&__radio-button {
position: absolute;
display: inline-block;
border: 2px solid red;
top: 0rem;
right: 3rem;
height: 15px;
width: 15px;
border-radius: 50%;
&::after {
content: "";
display: block;
height: 1.3rem;
width: 1.3rem;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: red;
opacity: 0;
transition: opacity .2s;
}
&:hover{
background-color: yellowgreen;
}
}