настройка переключателя chekbox через CSS

Question

Друзья, помогите доделать переключатель...

В чем проблема:

В общем решил я сделать стандартный переключатель chekbox со слайдером на CSS (благо такого добра в интернете более чем достаточно), а потом решил добавить до него текст "ON"/"OFF", ну а дальше начались проблемы, как заставить надписи исчезать и появляться при переключении слайдера без использования JS на чистом CSS? В интернете опять же нашел информацию о том, что обычно в таких случаях используют @media, однако я не нашел никакой информации, как именно это сделать...

Так же пробовал стандартные варианты через "+":

.chek:checked + #off_right {
  visibility: hidden;
}

но походу я что-то либо не доделываю, либо делаю что-то не так, ибо оно не работает.

.chek {
  visibility: hidden;
}
.chekbox {
  position: relative;
  width: 70px;
  height: 30px;
  background-color: red;
  border-radius: 50px;
}
.chekbox:after {
  content: '';
  position: absolute;
  top: 5px;
  right: 3px;
  width: 40px;
  height: 24px;
}

.chek-label {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50px;
  background-color: black;
  top: 3px;
  left: 3px;
  transition: all 0.4s ease;
  cursor: pointer;
  z-index: 1;
}
.chek:checked + .chek-label {
  left: 40px;
}
#on_left {
  position: absolute;
  visibility: hidden;
  top: 5px;
  left: 5px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
}
#off_right {
  position: absolute;
  visibility: visible;
  top: 5px;
  right: 5px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
}
@media (checked) {
  #on_left {
    visibility: visible;
  }
  #off_right {
    visibility: hidden;
  }
}

<div class="chekbox">
  <input type="checkbox" id="btn_audio" class="chek">
  <label for="btn_audio" class="chek-label"></label>
  <span id="on_left">ON</span>
  <span id="off_right">OFF</span>
</div>

Буду признателен за помощь и обьяснения. Так же, если кто может поделиться толковым источником информации, как это все работает, тоже буду признателен.

P.S. Под "толковым" я понимаю источники не из категории "2+2=4, а теперь решите интеграл", а из категории "работает это вот так, а чтобы получить вот это, надо использовать вот это." (в общем где все детально и подробно расжевывается на человеческом языке).

Answer 1

:root {
  --transitionDuration: 0.4s;
  --transitionTimingFunction: ease;
}

.chek {
  visibility: hidden;
}

.checkbox {
  position: relative;
  display: block;
  width: 70px;
  height: 30px;
  background-color: red;
  border-radius: 50px;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--transitionDuration) var(--transitionTimingFunction);
}


.chek-label {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50px;
  background-color: black;
  top: 3px;
  left: 3px;
  z-index: 1;
  transition: transform var(--transitionDuration) var(--transitionTimingFunction);
}
.chek:checked + .chek-label {
  transform: translateX(40px);
}

.on-left, .off-right {
  transition-property: opacity, visibility;
  transition-timing-function: var(--transitionTimingFunction);
  transition-duration: var(--transitionDuration);
}

.on-left {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  top: 5px;
  left: 5px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
}

.off-right {
  position: absolute;
  visibility: visible;
  opacity: 1;
  top: 5px;
  right: 5px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
}

.chek:checked ~ .off-right {
  opacity: 0;
  visibility: hidden;
}

.chek:checked ~ .on-left {
  opacity: 1;
  visibility: visible;
}

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

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

БЛОГ НА HUSL

настройка переключателя chekbox через CSS

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