CSS Toggle Switch

Link: CSS Toggle Switch

Screen Shot 2015-12-15 at 11.17.46 PM

The beauty of this CSS toggle switch is that it is accessible when JS/CSS is not available. The following is the HTML it uses.

<div class="switch-toggle switch-candy">
<input id="week" name="view" type="radio" checked>
<label for="week" onclick="">Week</label>
<input id="month" name="view" type="radio">
<label for="month" onclick="">Month</label>
<input id="day" name="view" type="radio">
<label for="day" onclick="">Day</label>
<a></a>
</div>

Which works when in HTML-only environment.

Screen Shot 2015-12-15 at 11.17.24 PM

IĀ also demonstrated a customized checkbox.

Makzan
I teach web design. I write books on HTML5 games development. I host classes on mobile web and app development. I made animation with Adobe Flash (now Animate).

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.