Custom switch

https://mdbootstrap.com/docs/b4/jquery/forms/switch/

by Andrey Izman

HTML

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitches">
  <label class="custom-control-label" for="customSwitches">Toggle this switch element</label>
</div>

CSS

*, *::before, *::after {
  box-sizing: border-box;
}


.custom-control {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}
.custom-switch {
  padding-left: 2.25rem;
}

.custom-switch [type="checkbox"]:not(:checked), 
.custom-switch [type="checkbox"]:checked {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}
.custom-switch input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

.custom-control-inline {
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-right: 1rem
}

.custom-control-input {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 1rem;
  height: 1.25rem;
  opacity: 0
}

.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: #007bff;
  background-color: #007bff
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 .2rem rgba(0,123,255,0.25)
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #80bdff
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  color: #fff;
  background-color: #b3d7ff;
  border-color: #b3d7ff
}

.custom-control-input[disabled] ~ .custom-control-label,.custom-control-input:disabled ~ .custom-control-label {
  color: #6c757d
}

.custom-control-input[disabled] ~ .custom-control-label::before,.custom-control-input:disabled ~ .custom-control-label::before {
  background-color: #e9ecef
}

.custom-control-label {
  position: relative;
  margin-bottom: 0;
  vertical-align: top;
  user-select: none;
}

.custom-control-label::before {
  position: absolute;
  top: .25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  content: "";
  background-color: #fff;
  border: #adb5bd solid 1px
}

.custom-control-label::after {
  position: absolute;
  top: .25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
...