Toggle switch that doesn't require "for" attribute on label (ideal for many dynamically generated rows)

switcher.css

input {
  display: none;
}

.capsule {
  width: 60px;
  height: 30px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  background: rgb(189, 189, 189);
  border-radius: 30px;
  
  transition: background-color 0.4s;
  -moz-transition: background-color 0.4s;
  -webkit-transition: background-color 0.4s;
}

.switch {
  left: 0;
  width: 20px;
  height: 20px;
  margin: 5px;
  content: '';
  position: absolute;
  background: #FFF;
  border-radius: 10px;
}

input:checked + .capsule {
  background: rgb(39, 173, 95);
}

input:checked + .capsule .switch {
  left: auto;
  right: 0;
}

switcher.html

<label>
  <input type="checkbox" />
  <div class="capsule">
    <div class="switch"></div>
  </div>
</label>