custom checkbox

by Soviut

HTML

<label>
  <span>Toggle Me</span>
  <input type="checkbox" class="toggle">
</label>

CSS

* {
  font-family: arial, helvetica, san-serif;
}

.toggle {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  width: 50px;
  height: 50px;
  
  background: cornflowerblue;
  border-radius: 5px;
  outline: 0;
  cursor: pointer;
}

.toggle:checked {
  background: red;
}