Custom Checbox & entradas de radio con CSS puro y Font awesome

Vista prévia

Descripción

Una solución CSS pura para el estilo de las casillas de verificación nativas y botones de radio usando CSS/CSS3 reglas y fuentes awesome iconos.

Características

• Navegación por teclado compatible (pestaña, flechas, barra espaciadora).
• Estilos para: hover y: Estados activos para proporcionar retroalimentación visual.

Funcionamiento

Cargue la hoja de estilos principal check-radio. CSS en la sección head del documento.

<link rel="stylesheet" href="dist/check-radio.css">

Cargue el Font awesome Icon Font en el documento.

<link rel="stylesheet" href="font-awesome.min.css">

Cree un grupo de botones de opción.

<label class="Form-label--tick">

<input type="radio" value="1" name="SomeRadio" class="Form-label-radio" checked>

<span class="Form-label-text">Option 1</span>
</label>
<label class="Form-label--tick">

<input type="radio" value="2" name="SomeRadio" class="Form-label-radio">

<span class="Form-label-text">Option 2</span>
</label>
<label class="Form-label--tick">

<input type="radio" value="3" name="SomeRadio" class="Form-label-radio">

<span class="Form-label-text">Option 3</span>
</label>

Cree un grupo de casillas de verificación.

<label class="Form-label--tick">

<input type="checkbox" value="1" name="SomeCheckbox" class="Form-label-checkbox">

<span class="Form-label-text">Option 1</span>
</label>
<label class="Form-label--tick">

<input type="checkbox" value="2" name="SomeCheckbox" class="Form-label-checkbox">

<span class="Form-label-text">Option 2</span>
</label>
<label class="Form-label--tick">

<input type="checkbox" value="3" name="SomeCheckbox" class="Form-label-checkbox">

<span class="Form-label-text">Option 3</span>
</label>