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

Рецепт, как на 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.

Теги