Как стилизовать родительський элемент в CSS?

Question

У меня есть такая структура радио кнопок:

<label class="radio-btn">
  <input type="radio" />
 <span>
  <em>
   TEXT
  </em>
 </span>
</label>

И такие стили:

radio-btn{
    padding: 3px 20px 3px 20px;
    color: $gray60;
    
    input:checked {
      background-color: $gray10;
      color: red;
      font-weight: 500;
    }


    &:hover {
      background-color: $gray10;
      color: $purple80;
    }
  }

У меня не получается сделать стили для label когда инпут в статусе checked. Как это можно сделать?

UPD: Менять структуру нельзя, т.к кнопок в проекте тысячи и это сломает очень много всего. JS также использовать не рекомендовано

Answer 1

в label помещаете input и span. input скрываете, а для span пишете стили. при input:cheked, меняете их. и span будет работать как input. label естесственно не стилизуете

Answer 2

При желании, любое необходимое визуальное оформление здесь можно сделать по селектору input:checked + span

label {
  position: relative;
}

label>span {
  position: absolute;
  background-color: #eee;
  width: max-content;
  padding: 0.3em 0.5em 0.3em 1.5em;
}

label:hover>span {
  color: blue;
}

input {
  position: absolute;
  z-index: 1;
  margin: 0.5em;
}

input:checked+span {
  background-color: #ccc;
}

<label class="radio-btn">
  <input type="checkbox" />
 <span>
  <em>
   TEXT
  </em>
 </span>
</label>

БЛОГ НА HUSL

Как стилизовать родительський элемент в CSS?

Ответы (2 шт):