checked not working properly for custom radio/checkboxes - css

Question

I am trying to make a custom checkbox/radio but the problem is on checked doesn't add css.
My Code:
.custom-checkbox-label {
position: relative;
cursor: pointer;
.custom-checkbox {
background: #ffffff;
border: 1px solid #cccccc;
width: 24px;
height: 24px;
border-radius: 50%;
}
input[type='radio'] {
opacity: 0;
&:checked {
.custom-checkbox {
background: #08abe1;
}
}
}
}
<label htmlFor="delivery-type" className="custom-checkbox-label">
<div className="custom-checkbox"></div>
<input
id="delivery-type"
type="radio"
onChange={() => alert(1)}
/>
</label>
This is inside React that's why I am using htmlFor, and I did check the radio does get triggered the css inside checked does not apply.

Answer 1

Few things wrong with this -
div is not allowed inside a label - change it to a span
Your custom checkbox need to come after the input - so you can use the adjacent css selector
Your sass selector is wrong for the checked (it currently tries to select a custom-checkbox inside your input)
you need quotes around your onchange
/* new sass
.custom-checkbox-label {
position: relative;
cursor: pointer;
.custom-checkbox {
background: #ffffff;
border: 1px solid #cccccc;
display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
}
input[type='radio'] {
opacity: 0;
&:checked {
&+.custom-checkbox {
background: #08abe1;
}
}
}
}
Which will compile to the below: */
.custom-checkbox-label {
position: relative;
cursor: pointer;
}
.custom-checkbox-label .custom-checkbox {
background: #ffffff;
border: 1px solid #cccccc;
display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
}
.custom-checkbox-label input[type=radio] {
opacity: 0;
}
.custom-checkbox-label input[type=radio]:checked+.custom-checkbox {
background: #08abe1;
}
<label htmlFor="delivery-type" className="custom-checkbox-label">
<input
id="delivery-type"
type="radio"
onChange="{() => alert(1)}"
/>
<span className="custom-checkbox"></span>
</label>