Применить новые стили если checkbox:checked

Question

Имеется вот такая разметка:

   <div class="tickets-transplants">
        <span class="tickets-transplants__text">КОЛИЧЕСТВО ПЕРЕСАДОК</span>
        <label><span class="tickets-transplants__checkbox"></span><input type="checkbox" name="all" checked="">Все</label>
        <label><span class="tickets-transplants__checkbox"></span><input type="checkbox" name="1">1 пересадка</label>
        <label><span class="tickets-transplants__checkbox"></span><input type="checkbox" name="2">2 пересадки</label>
        <label><span class="tickets-transplants__checkbox"></span><input type="checkbox" name="3">3 пересадки</label>
   </div>

И следующий стиль у span внутри label:

tickets-transplans__checkbox {
    width: 20px
    height: 20px
    background-image: url('../img/Form.png')
    }

Я хочу менять фон на Form2.png, если input:checked. Как мне правильно написать стили?

Я пробовал вот так, но ничего не выходит:

.tickets-transplants > label > input:checked + .tickets-transplants__checkbox
    width: 20px
    height: 20px
    background-image: url('../img/Checkbox.png')

Answer 1

При той разметке, что в вопросе, без JS не обойтись, так как в CSS, сначала идёт управляющий элемент, а затем (рядом, но ниже или глубже) управляемые. Поэтому нужно поменять местами <input> и <span> :

.tickets-transplants>label { position: relative; }

.tickets-transplants>label>input { opacity: 0; }

.tickets-transplants>label>.tickets-transplants__checkbox {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #aaf;
}
.tickets-transplants>label>input:checked+.tickets-transplants__checkbox {
  background-color: #faa;
}

<div class="tickets-transplants">
  <span class="tickets-transplants__text">КОЛИЧЕСТВО ПЕРЕСАДОК</span>
  <label><input type="checkbox" name="all" checked=""><span class="tickets-transplants__checkbox"></span>Все</label>
  <label><input type="checkbox" name="1"><span class="tickets-transplants__checkbox"></span>1 пересадка</label>
  <label><input type="checkbox" name="2"><span class="tickets-transplants__checkbox"></span>2 пересадки</label>
  <label><input type="checkbox" name="3"><span class="tickets-transplants__checkbox"></span>3 пересадки</label>
</div>

БЛОГ НА HUSL

Применить новые стили если checkbox:checked

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