Posted onNov 6, 2018 • Edited onJan 23, 2020

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 :)

<inputclass="switch"id="switch-55"type="checkbox"/><labelfor="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;}