HTML элемент ввода типа checkbox в виде переключателя

Добавлено 7 января 2021 в 18:25

Рецепт, как на CSS сделать так, чтобы HTML элемент ввода типа checkbox выглядел как переключатель.

Итоговый элемент

HTML код

<input class="switch" type="checkbox">

CSS код

input.switch {
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  appearance: none;
  height: 1em;
  width: 2em;
  border-radius: 1em;
  box-shadow: inset -1em 0px 0px 0px rgba(192, 192, 192, 1);
  background-color: white;
  border: 1px solid rgba(192, 192, 192, 1);
  outline: none;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

input.switch:checked {
  box-shadow: inset 1em 0px 0px 0px rgba(33, 150, 243, 0.5);
  border: 1px solid rgba(33, 150, 243, 1);
}

input.switch:focus {
    outline-width: 0;
}

Демо на CodePen

See the Pen Checkbox switch, input element only + CSS, crossbrowser by RadioProg (@radioprog) on CodePen.

Теги

CSSHTMLВеб-разработка / WebDev / Web DevelopmentВерсткаРецепты

На сайте работает сервис комментирования DISQUS, который позволяет вам оставлять комментарии на множестве сайтов, имея лишь один аккаунт на Disqus.com.

В случае комментирования в качестве гостя (без регистрации на disqus.com) для публикации комментария требуется время на премодерацию.