Completely configurable, flexible, re-usable CSS-only checkbox toggles

#cssonly #checkboxhack #siblingselector #nojs

Configurable using CSS Custom properties!. Found a lot of great examples of toggles around the web, but all of them had some form of hard-coded values. Check out the code. Uses line-height and follows the natural sizing given to it. Feel free to steal :)

  <input class="switch" id="switch-55" type="checkbox"/>
  <label for="switch-55" style="
    --switch-width: 3rem; /* optional properties */
    --switch-knob-size: .8rem;
  ">Toggle</label>

/* the following properties are configurable by simply overriding them: */
:{  
  --switch-background: silver;
  --switch-background-active: mediumseagreen;
  --switch-width: 3ch;
  --switch-knob-size: calc(var(--switch-width) / 3);
  --switch-knob-offset: calc(50% - (var(--switch-knob-size) / 2));
  --switch-knob-color: white;
  --switch-transition-duration: 0.3s;
}