Controles segmentados animados con CSS puro/CSS3

Vista prévia

Descripción

Un simple CSS/SCSS solución ton Transform estándar casilla de verificación y botón de radio en controles segmentados estilo etiqueta animada.

Características

• Simple y hermoso
• Tamaños personalizados
• Diseño fluido y receptivo
• Se puede desactivar

Uso básico

Transforma un grupo de botones de radio en controles segmentados.

<div class="segmented-control" style="width: 100%; color: #5FBAAC">

<input type="radio" name="sc-1-1" id="sc-1-1-1">

<input type="radio" name="sc-1-1" id="sc-1-1-2">

<input type="radio" name="sc-1-1" id="sc-1-1-3" checked>

<input type="radio" name="sc-1-1" id="sc-1-1-4">

<label for="sc-1-1-1" data-value="Lorem Ipsum">Lorem Ipsum</label>

<label for="sc-1-1-2" data-value="Risus Purus">Risus Purus</label>

<label for="sc-1-1-3" data-value="Pellentesque Porta">Pellentesque Porta</label>

<label for="sc-1-1-4" data-value="Fringilla">Fringilla</label>
</div>

Transforma un grupo de casillas de verificación en controles segmentados.

<div class="segmented-control" style="width: 100%;">

<input type="checkbox" name="sc-2-1" id="sc-2-1-1" checked>

<label for="sc-2-1-1" data-value="Venenatis">Venenatis</label>
</div>
<div class="segmented-control" style="width: 100%;">

<input type="checkbox" name="sc-2-1" id="sc-2-1-2">

<label for="sc-2-1-2" data-value="Malesuada">Malesuada</label>
</div>
<div class="segmented-control" style="width: 100%;">

<input type="checkbox" name="sc-2-1-3" id="sc-2-1-3" checked>

<label for="sc-2-1-3" data-value="Consectetur">Consectetur</label>
</div>
<div class="segmented-control" style="width: 100%;">

<input type="checkbox" name="sc-2-1-4" id="sc-2-1-4">

<label for="sc-2-1-4" data-value="Egestas">Egestas</label>
</div>

Registro de cambios

10/03/2016

• transición inútil fija en la casilla de verificación