Interruptores CSS puros para casillas de verificación y entradas de radio

Vista prévia

Descripción

Una solución CSS pura que transforma casillas de verificación regulares o entradas de radio en interruptores de palanca.

Funcionamiento

Cargue el archivo de hoja de estilos requerido en la sección head del documento.

<link rel="stylesheet" href="rb-switcher.min.css">

Cree un grupo de conmutadores de alternancia a partir de casillas de verificación y etiquetas de entrada.

<fieldset>

<legend>What's your favorite pet?</legend>

<div>


<label for="dog">



Dog


</label>


<label class="rb-switcher">



<input type="checkbox" name="animal" id="dog" value="dog" />



<i></i>


</label>

</div>

<div>


<label for="cat">



Cat


</label>


<label class="rb-switcher">



<input type="checkbox" name="animal" id="cat" value="cat" />



<i></i>


</label>

</div>

<div>


<label for="bird">



Bird


</label>


<label class="rb-switcher">



<input type="checkbox" name="animal" id="bird" value="bird" />



<i></i>


</label>

</div>
</fieldset>

Cree un grupo de conmutadores de palanca de botones de radio y etiquetas de entrada.

<fieldset>

<legend>Male</legend>

<label class="rb-switcher">


<input type="radio" name="sex" value="male" checked>


<i></i>

</label>
</fieldset>
<fieldset>

<legend>Female</legend>

<label class="rb-switcher red">


<input type="radio" name="sex" value="female">


<i></i>

</label>
</fieldset>