Стилизация чекбокса

Question

Подскажите пожалуйста, как можно сделать такой переключающийся checkbox?

<input type="checkbox" class="supercars-checkbox">
<label for="supercars-checkbox"></label>

Answer 1

Вот мой вариант. Надеюсь помог ^-^

.flip {
  position: relative;
  display: inline-block;
  background-color: transparent;
  border: 2px solid pink;
  border-radius: 24px;
  padding: 4px;
}

input[type="checkbox"] {
  display: none;
}

span {
  position: relative;
  padding: 6px;
  display: inline-block;
  width: 82px;
  text-align: center;
  font-family: consolas;
  font-weight: 600;
}

.active:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: pink;
  border-radius: 24px;
  z-index: -1;
  transition: .5s;
}

input[type="checkbox"]:checked+label .active:after {
  left: 100%;
}

<div class="flip">
  <input type="checkbox" id="flip">
  <label for="flip">
    <span class="active">No</span>
    <span>Yes</span>
   </label>
</div>

БЛОГ НА HUSL

Стилизация чекбокса

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