Я настроил свои радио-кнопки, но я хотел сделать мой код чище, используя SCSS. Поэтому я изменил свой код с CSS на SCSS, но появилась проблема:
HTML
<input type="radio" name="test" value="value">
<label>
<span></span>
Test radio
</label>
CSS
input[type="radio"] {
display: none;
}
input[type="radio"] + label span {
display: inline-block;
width: 24px;
height: 24px;
margin-right: 6px;
vertical-align: middle;
background: url(./radio-sprite.svg) -46px 0 no-repeat;
background-size: 92px 24px;
cursor: pointer;
}
input[type="radio"]:checked + label span {
background: url(./radio-sprite.svg) -69px 0px no-repeat;
background-size: 92px 24px;
}
input[type="radio"]:disabled + label span {
background: url(./radio-sprite.svg) -22px 0px no-repeat;
background-size: 92px 24px;
}
SCSS
input[type="radio"] {
display: none;
& > label {
cursor: pointer;
span {
display: inline-block;
width: 24px;
height: 24px;
margin-right: $margin-small;
vertical-align: middle;
background: url(./app/shared/assets/icons/radiobtn-sprite.svg) -46px 0 no-repeat;
background-size: 92px 24px;
cursor: pointer;
}
}
&:checked + label span {
background: url(./app/shared/assets/icons/radiobtn-sprite.svg) -69px 0px no-repeat;
background-size: 92px 24px;
}
&:disabled + label span {
background: url(./app/shared/assets/icons/radiobtn-sprite.svg) -22px 0px no-repeat;
background-size: 92px 24px;
}
}
Когда я заменил свой CSS на вышеуказанный код SCSS, мои кнопки исчезли. Я не вижу, в чем проблема. Любая помощь будет оценена