.switch input {
  display: none;
}
.switch i {
  vertical-align: middle;
  display: inline-block;
  cursor: pointer;
  padding-right: 20px;
  transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  border-radius: 20px;
  border: #ccc 1px solid;
  margin-right: 5px;
  background-color: #fefefe;
}
.switch span {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.switch i:before {
  display: block;
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: #fafafa;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.switch :checked + i {
  padding-right: 0;
  padding-left: 20px;
  background-color: lightblue;
}
.switch.red :checked + i {
  background-color: #d9534f;
}
switch.disabled > .switch i {
  border: #DEDEDE 1px solid;
  cursor: not-allowed;
}
switch.disabled > .switch i:before {
  background: #fff;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
switch.disabled span,
switch.disabled label {
  color: #a2a2a2;
}