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)