CSS Checkbox Generator

<label class="toggle"><input type="checkbox" /><span class="slider"></span></label>

<style>
.toggle { position:relative; display:inline-block; width:48px; height:24px; } .toggle input { opacity:0; width:0; height:0; } .slider { position:absolute; cursor:pointer; inset:0; background:#ccc; border-radius:24px; transition:0.3s; } .slider::before { content:''; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:white; border-radius:50%; transition:0.3s; } input:checked + .slider { background:#3b82f6; } input:checked + .slider::before { transform:translateX(24px); }
</style>