Как сделать переключатель css

Переключатель (или переключатели) можно сделать с помощью CSS и HTML. Один из самых распространенных типов переключателей — это переключатель для переключения режима «вкл./выкл.».

Вот пример кода HTML и CSS для создания такого переключателя:

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

Здесь тег label используется для связывания текстовой метки и переключателя. Тег input содержит атрибут type="checkbox", который задает тип переключателя. Внутри тега label размещен span, который будет отображаться как переключатель.

После этого нужно добавить стили для переключателя:

.switch input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  border-radius: 34px;
  background-color: #ccc;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  border-radius: 50%;
  background-color: white;
  transition: all 0.3s ease;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

С помощью свойства opacity: 0; width: 0; height: 0; мы скрыли сам элемент input.

Стили для переключателя задают свойство position: relative; и определяют размеры и форму слайдера. Затем используется псевдоэлемент :before, чтобы создать белый кружок, который будет перемещаться вправо при переключении переключателя.

С помощью селектора input:checked + .slider:before мы указываем, что при переключении переключателя в позицию «включено» нужно переместить белый кружок на положение справа.

Это простой способ создать переключатель на чистом CSS и HTML. В дальнейшем можно использовать другие стили и дорабатывать функционал переключателя в зависимости от конкретных задач.