не работают стили при input[type=radio]:checked

Question

label{
  width: 300px;
  position: relative;
  background-color: orange;
}

label::after{
  content: "";
  width: 30px;
  height: 30px;
  background-color: red;
  position: absolute;
}

input[type=radio]:checked label::after{
  background-color: blue;
}

<label for="test">
  <input type="radio" id="test">
</label>

Answer 1

Увы, но CSS не умеет смотреть "назад", точнее обращаться к родительскому элементу..
А ваш label как раз является родителем input.

По этому придётся выкручиваться как-то так:

label{
  width: 300px;
  position: relative;
  background-color: orange;
}

label::after {
  content: "";
  width: 30px;
  height: 30px;
  background-color: red;
  position: absolute;
}

input[type=checkbox]:checked ~ label::after {
  background-color: blue;
}

<input type="checkbox" id="test">
<label for="test"></label>

А ещё у вас ошибка, в HTML вы пишите <input type="radio">, а в CSS обращаетесь к checkbox.

БЛОГ НА HUSL

не работают стили при input[type=radio]:checked

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