Как задать стиль родителя при input:checked?

Question

Понятно, что в CSS это невозможно. Попробовал в JS -- не получается. Подскажите, в чём ошибка.

if(cheese1.checked == true)
{
    document.querySelector('label').style.background = `#F0E68C`; 
    document.querySelector('label').style.color = `#800000`; 
}

label {
  height: 10vh;
    width: 20vw;
   color: #F0E68C;
   background: #800000;
   margin: 1.2vh auto;
   border: 4px solid #F0E68C;
   border-radius: 5vh;
   position: relative; 
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer; 
   overflow: hidden;
}

<label> 
<input type="radio" name="cheese" id="cheese1" />
     <div class="наложение"></div><div class="текст">Варик</div>
</label>

Answer 1

На сегодняшний день это вполне возможно только средствами CSS. Начните использовать псевдокласс :has() :

label {
  position: relative;
  margin: 1.2vh auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vh;
  width: 20vw;
  border: 4px solid #F0E68C;
  border-radius: 5vh;
  overflow: hidden;
  color: #F0E68C;
  background: #800000;
  cursor: pointer;
}
label:has(input:checked) {
  color: #800000;
  background: #F0E68C;
}

<label>
  <input type="radio" name="cheese" id="cheese1" />
  <div class="наложение"></div><div class="текст">Варик</div>
</label>

БЛОГ НА HUSL

Как задать стиль родителя при input:checked?

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