Los conmutadores de palanca solo CSS accesibles

Vista prévia

Descripción

Un enfoque CSS puro para crear interruptores de palanca hermosos y accesibles desde casillas de verificación y botones de radio. Compatible con los frameworks bootstrap y Foundation CSS.

¿Cómo funciona?

Para empezar, debe incluir el toggle-switch. CSS en la sección head del documento HTML.

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

El código HTML de ejemplo para crear conmutadores de alternancia.

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

Registro de cambios

08/06/2018

• Bootstrap 4 compatible