Accessible CSS Only Toggle Switches

Category: CSS & CSS3 , Form , Recommended | August 6, 2018
Author: ghinda
Views Total: 4,654
Official Page: Go to website
Last Update: August 6, 2018
License: MIT

Preview:

Accessible CSS Only Toggle Switches

Description:

A pure CSS approach to creating beautiful, accessible toggle switches from checkboxes and radio buttons. Compatible with Bootstrap and Foundation CSS frameworks.

Basic usage:

To get started, you need to include the toggle-switch.css in the head section of the html document.

<link rel="stylesheet" href="dist/toggle-switch.css">

The sample Html to create toggle switches.

<label class="switch-light switch-candy" onclick="">
  <input type="checkbox">

  <strong>
    Wireless
  </strong>

  <span>
    <span>Off</span>
    <span>On</span>
    <a></a>
  </span>
</label>

<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>

<label>View</label>
<div class="switch-toggle switch-candy">
  <input id="hour3" name="view3" type="radio" checked>
  <label for="hour3" onclick="">Hour</label>

  <input id="day3" name="view3" type="radio">
  <label for="day3" onclick="">Day</label>

  <input id="week3" name="view3" type="radio">
  <label for="week3" onclick="">Week</label>

  <input id="month3" name="view3" type="radio">
  <label for="month3" onclick="">Month</label>

  <input id="year3" name="view3" type="radio">
  <label for="year3" onclick="">Year</label>

  <input id="decade3" name="view3" type="radio">
  <label for="decade3" onclick="">Decade</label>

  <a></a>
</div>

Changelog:

08/06/2018

  • Bootstrap 4 compatible

You Might Be Interested In:


Leave a Reply