Повлиять на свойства родительского контейнера из вложенных элементов через CSS

Question

друзья!

Необходима ваша помощь в решении одной проблемы:

Итак, есть у меня чекбокс:

<label class="checkbox">
  <input type="checkbox" id="btn_cheats" class="chek">
  <span class="chek-label"></span>
  <span class="on-left">ON</span>
  <span class="off-right">OFF</span>
<label>

со всеми прописанными стилями и опирациями в CSS и все работало хорошо, пока я не попытался запустить его на более старой версии браузера, в результате, обнаружилось, что вот это выражение

.checkbox:has(.chek:checked) {
  background-color: lime;
}

там не работает, так как :has еще слишком новый и является экспериментальным:

Итак, вопрос, чем можно заменить данное выражение, чтобы чекбокс корректно менял цвета и в старых браузерах??? Я пробовал медиа, но судя по всему эта штука не работает с классами или я что-то не так задавал:

@media (.chek:checked) {
   .checkbox {
    background-color: lime;
  }
}

Answer 1

Собственно говоря нашел следующее решение:

Добавляем еще один span в хтмл

<label class="checkbox">
            <input type="checkbox" id="btn_audio" class="chek">
            <span class="chek-label"></span>
            <span class="checkbox-span"></span>
            <span class="on-left">ON</span>
            <span class="off-right">OFF</span>
         <label>

присвоил ему новый класс, на который в CSS скопировал свойства checkbox:

.checkbox-span {
  position: absolute; /* вместо релатив использовал абсолют, так как он вложенный */
  display: block;
  width: 70px;
  height: 30px;
  top: 0px;
  background-color: red;
  border-radius: 50px;
}

тогда стало возможным использование следующей конструкции:

.chek:checked ~ .checkbox-span {
  background-color: lime;
}

Может это решение и не решает всех проблем со старыми браузерами, но по крайней мере работает на браузерах 2-3 летней давности...

БЛОГ НА HUSL

Повлиять на свойства родительского контейнера из вложенных элементов через CSS

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