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; }
Top comments (0)