soy Kseso y esto EsCSS

Cómo estilizar el Checkbox con Css no privativo

Cómo mostrar los checkboxes de forma personalizadas utilizando propiedades Css comunes a todos los navegadores (no privativas).

Cómo estilizar el Checkbox con Css no privativo

·Por Kseso ✎ 8

Por la actualidad de este tema (estilzar los botones tipo radio, checkbox y otros inputs) rescato este veterano post (publicado en Abril de 2013) y así de paso lo actualizo y corrigo algún valor para que sea compatible con el protocolo Https de reciente implementación en el blog.

¿Usas checkboxes y dejas que cada navegador los muestre a su manera o prefieres darle una apariencia acorde con tu diseño?.

Si optas por lo primero estás excusado de seguir leyendo. Pero si también quieres tener el control sobre estos elementos sigue adelante. A su sencillez se une que el límite al resultado obtenido lo pones tú.

El típico marcado marcado Html de de este elemento es algo como:

<input type="checkbox" id="ejemplo-1" name="ejemplo-1" value=""> <label for="ejemplo-1">Info sobre el checkbox</label>

Pero en la práctica este etiquetado suele ser algo más extenso. Así que para este artículo vamos a añadirle algo más de información, como un texto indicativo y:

<section> <h3>¿Te gusta KsesoCss?</h3> <div class="checkbox-1"> <input type="checkbox" id="ejemplo-1" value="1" name="" /> <label for="ejemplo-1"></label> </div> </section>

Lo primero para poder adaptar su apariencia a nuestro proyecto es ocultar a la vista el checkbox pero que siga siendo plénamente operativo. Para ello está la propiedad visibility

input[type=checkbox] { visibility: hidden; }

En el ejemplo usamos un selector de atributo por tipo de elemento. Cualquier otro sería válido igualmente. Asignándole una clase o id, por ejemplo.

A continuación, usamos el div que contenedor checkbox-1 para lograr la corona exterior o reborde del falso checkbox:

.checkbox-1 { background: #ededed; width: 40px; height: 40px; margin-left: 10px; border-radius: 50%; position: relative; border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.4); }

El siguiente paso es hacer que la etiqueta o label adopte la apariencia deseada, el círculo interior en su estado "no-seleccionado":

.checkbox-1 label { background: #909090; display: block; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; position: absolute; top: 10px; left: 10px; z-index: 1; box-shadow: 0 0 5px rgba(0,0,0,0.7) inset; transition: all .5s ease; }

Con lo anterior ya tenemos el checkbox estilizado a nuestro gusto. Sólo resta hacer visible con algún cambio al evento checked. Para ello utilizamos la pseudoclase :checked junto al selector de hermano adyacente para apuntar al label

.checkbox-1 input[type=checkbox]:checked + label { background: #FF7361; width: 30px; height: 30px; top: 5px; left: 5px; }

Puedes ver el resultado de todo ello, puesto a trabajar junto en jsfiddle:

See the Pen PPmELB by Kseso (@Kseso) on CodePen.

Variación checkbox personalizado con "Sí-No"

En este caso añadimos un texto identificativo "si / no" para indicar la opción seleccionada. Para ello hacemos uso de los pseudoelementos:

.checkbox-2:before { content: 'Sí'; position: absolute; top: 0; left: 20px; color: #19DD89; font-size: 20px; line-height: 40px; text-shadow: 0 0 2px #FFFFFF; } .checkbox-2:after { content: 'No'; color: #BCB589; position: absolute; top: 0px; right: 20px; font-size: 20px; line-height: 40px; text-shadow: 0 0 1px #000000; }

Y en este ejemplo la variación al evento :checked la hacemos patente cambiando el color y la posición de label:

.checkbox-2 input[type=checkbox]:checked + label { left: 115px; background: #19DD89; }

El resultado de nuestro checkbox ya alterado con todos los estilos funcionando juntos, en el jsfiddle es:

See the Pen YyVYbY by Kseso (@Kseso) on CodePen.

Créditos y complementos

Para este artículo me he apoyado y utilizado como ayuda:

Check out this Pen!

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso