CSS

switch checkbox

[type="checkbox"] {
  position: relative;
  left: 30px;
  top: 0px;
  z-index: 0;
  -webkit-appearance: none;
}
[type="checkbox"] + label {
  position: relative;
  display: block;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 24px;
  line-height: 1.3;
  padding-left:70px;
  position: relative;
  margin-top: -30px;
}
[type="checkbox"] + label:before {
  width: 60px;
  height: 30px;
  border-radius: 30px;
  border: 2px solid #ddd;
  background-color: #EEE;
  content: "";
  margin-right: 15px;
  transition: background-color 0.5s linear;
  z-index: 5;
  position: absolute;
  left: 0px;
}
[type="checkbox"] + label:after {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: #fff;
  content: "";
  transition: margin 0.1s linear;
  box-shadow: 0px 0px 5px #aaa;
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 10;
}
[type="checkbox"]:checked + label:before {
  background-color: #2b8718;
}
[type="checkbox"]:checked + label:after {
  margin: 0 0 0 30px;
}