How to make a radio button look like a toggle button

Depending on which browsers you aim to support, you could use the :checked pseudo-class selector in addition to hiding the radio buttons. Using this HTML: <input type=”radio” id=”toggle-on” name=”toggle” checked ><label for=”toggle-on”>On</label ><input type=”radio” id=”toggle-off” name=”toggle” ><label for=”toggle-off”>Off</label> You could use something like the following CSS: input[type=”radio”].toggle { display: none; } input[type=”radio”].toggle:checked + label { … Read more