0

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

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

введите сюда описание изображения

1 ответ 1

2

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

.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>

4
  • Спасибо за решение! Commented 11 мар. 2022 в 11:02
  • У вас с правой стороны(Yes) расстояние чуть больше чем слева, не знаете как это исправить? Commented 11 мар. 2022 в 11:55
  • 1
    Можно конечно просто left указать 104% Commented 11 мар. 2022 в 11:57
  • @ПростаMiha единственное что меня смущает в вашем ответе, это то что элемент можно выделить, думаю без выделения будет намного лучше. user-select: none !important;
    – ΝNL993
    Commented 13 мар. 2022 в 17:06

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.