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!

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

Comentarios: 8

  1. Muy buen artículo como siempre... Saludos :D

    ResponderEliminar
  2. Que facil se hace con CSS, es algo que en realidad no sabia, Excelente el post.

    ResponderEliminar
  3. Toma toma toma! qué gran artículo, muy claro y útil!! :D

    ResponderEliminar
  4. Hola saludos mi pregunta es y si son muchos checkbox? como se puede evitar que uno solo selecciones a los otros? por que no funciona ni cambiando el valor del checkbox saludos
    Gracias

    ResponderEliminar
    Respuestas
    1. Hola Juan
      Lo cierto es que te ha quedado una consulta un poco ambigua.
      ¿Quieres que uno y sólo uno de un grupo de inputs pueda ser seleccionado simultáneamente? O lo que es lo mismo, que al marcar uno (checked) el resto se desmarquen?.

      Si es eso, es un tema de Html, no css.

      Hay dos tipos de inputs de verificación o selección: los de tipo radio y de tipo checkbox.
      A ambos tipos se le puede declarar el atributo 'name' así name='un_nombre' y este 'name' puede ser común a un grupo de ellos.

      Una diferencia sustancial entre los checkbox y los radio es que en los primeros (checkbox) pueden ser marcados como seleccionados (checked) simultáneamente varios de ellos aunque compartan el mismo 'name'. Pues deberían utilizarse para opciones no excluyentes entre sí.

      Sin embargo en los 'radio' con el mismo 'name' al seleccionar uno el resto se desmarcan. Son opciones excluyentes.

      Prueba lo siguiente en un navegador:

      <h2>¿Qué lenguajes conoces?</h2>
      <input type="checkbox" name="kseso" value="Css"> Css<br/>
      <input type="checkbox" name="kseso" value="Html"> Html<br/>
      <input type="checkbox" name="kseso" value="Js"> Js<br/>
      <input type="checkbox" name="kseso" value="Php"> Php<br/>
      <h2>Con qué navegador está viendo esta página ahora</h2>
      <input type="radio" name="kseso" value="Chrome"> Chrome<br/>
      <input type="radio" name="kseso" value="Opera"> Opera<br/>
      <input type="radio" name="kseso" value="Safari"> Safari<br/>
      <input type="radio" name="kseso" value="Firefox"> Firefox<br/>


      Un saludo. Espero haber acertado con tu duda.

      Eliminar
  5. Tengo el mismo problema, puedo resolverlo con algo de JavaScript o jQuery, pero lo que el colega comenta es que al tener la misma clase varios checkbox y al dar click en cualquiera, todos los checkbox se verán afectados debido a que en las reglas de CSS no hay identificadores únicos, afecta a todo lo que sea checkbox, tendriamos que usar un this o similar.

    Saludos

    ResponderEliminar
  6. No se necesita de javascript y mucho menos jQuery
    Isaac, este artículo sólo va de cómo aplicar estilos a estos elementos.
    No obstante, habrás visto, y si no fíjate, que por el marcado html (cada input y su label son adyecentes) el selector usado es el de hermano adyacente (+)
    En otras demos que tengo publicadas se necesita discriminar la funcionalidad de un input u otro. Así que para desligar el que sean adyacentes puedes usar el selector de atributo, que en estos casos es el 'for' que debe acompañar a cada label y es el que crea el vínculo entre parejas: el mismo valor del atributo id del input y del atributo for de su label.
    Mira este artículo y los artículos que enlazo en él.

    ResponderEliminar
  7. Excelente manual para personalizar tus objetos de tipo checkbox, la verdad es una explicaciòn bastante buena paso a paso, ojala y sigan produciendo manuales de este tipo para aportar a toda la comunidad !!
    Para personas que van iniciando les puuedo recomendar cursos de programaciòn http://www.grupocodesi.com bastante buenos yo aprendì con ellos.

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap