Checkbox y radio buttons con estilo

Buenas lechuguillas nuestras! Hoy os traemos unos sencillos trucos para mejorar los estilos de nuestros checkbox y radio buttons con css.

La posibilidad de dar  estilo a nuestros checkbox y radio buttons es posible gracias a la pseudoclase :checked de css3, a continuación os mostraremos dos maneras de darles estilo, utilizando imágenes y modificando el estilo del css simplemente.

Estilo basado en la imagen

Utilizando este tipo de estilo conseguimos nuestros checkboxes y radio buttons con mayor presencia, pero siempre será un poco más lento en la carga que la modificación por css. Para reducir el tiempo de carga, siempre podemos utilizar sprites (un sprite es una imagen que contiene todos nuestros iconos, y mostrando solo la parte que necesitamos, conseguimos el mismo efecto que si usasemos una imagen para cada uno) en un lugar de una imagen simple.

Por lo tanto vamos al lio con el código HTML para ir comenzando:

<div>
  <input id="opcion" type="checkbox" name="campo" value="opcion">
  <label for="opcion">Valor</label>
</div>

Ahora debemos ocultar el checkbox con css:

input[type=checkbox],
input[type=radio]{
  width   : 28px;
  margin  : 0;
  padding : 0;
  opacity : 0;
}

Los selectores de las lineas 1 y 2 seleccionan los input de tipo checkbox y radio button. Las lineas 3 y 5 cambian el tamaño, magen y padding. La linea 6 hace que la opacidad sea 6, con lo que serán invisibles.

Ahora damos la posición a la etiqueta y le añadimos la imagen de el checkbox que no está seleccionado:

input[type=checkbox] + label,
input[type=radio] + label{
  display      : inline-block;
  margin-left  : -28px;
  padding-left : 28px;
  background   : url('boton-sinseleccionar.png') no-repeat 0 0;
  line-height  : 24px;
}

La linea 3 hace que la etiqueta se ponga en linea, permitiendo que en la linea 7 se cambie la altura a la altura de la imagen alternativa y se centre el texto verticalmente. La linea 4 usa el margen negativo para ocupar el espacio que debería utilizar el checkbox. y la linea 5 usa el padding para que el texto ocupe la posición que debe. Los 28 píxeles que se utilizan deben ser el resultado del tamaño de la imagen más el padding, si vuestra imagen es distinta, podeis ajustarla. La linea 6 es la que pone la imagen que querais utilizar como el checkbox sin seleccionar (el nombre tendreis que cambiarlo por el vuestro).

Finalmenete, le decimos que imagenes deben introducir cuando se seleccionen los checkbox y los radio buttons:

input[type=checkbox]:checked + label{
  background   : url('boton-seleccionado.png') no-repeat 0 0;
}

input[type=radio]:checked + label{
   background   : url('boton-seleccionado') no-repeat 0 0;
}

Evidentemente estamos utilizando para los dos el mismo, utilizar la imagen que deseeis para el checkbox y la que querais para el radiobutton (que evidentemente no es la misma). Si quisierais utilizar sprites como hemos dicho antes, en lugar de cambiar la imagen cuando se seleccione, solo tendremos que cambiar la posición que se debe mostrar en su lugar:

input[type=checkbox]:checked + label{
  background-position : 0 -24px;
}

input[type=radio]:checked + label{
  background-position : 0 -48px;
}

A continuación mostraremos como modificarlos sin utilizar imágenes.

Estilo basado en css puro

El html que utilizaríamos en este caso, sería practicamente el mismo que con el método anterior:

<div>
  <input id="opcion" type="checkbox" name="campo" value="opcion">
  <label for="opcion"><span><span></span></span>Valor</label>
</div>

Ocultamos los checkboxes y los radio buttons con css:

input[type=checkbox],
input[type=radio]{
  width     : 2em;
  margin    : 0;
  padding   : 0;
  font-size : 1em;
  opacity   : 0;
}

La técnica es la misma que la del método anterior, pero como el tamaño es relativo al tamaño de la fuente, en la linea 3 le decimos el tamaño de la fuente porque el navegador usa  una fuente más pequeña para los checkbox y los radio buttons por defecto.

Damos la posición a la etiqueta:

input[type=checkbox] + label,
input[type=radio] + label{
  display      : inline-block;
  margin-left  : -2em;
  line-height  : 1.5em;
}

De nuevo la técnica es la misma que el método basado en imágenes, pero usando unidades relativas. El padding no es obligatorio como con el tamaña de la imagen de fondo.

Ahora le daremos estilo al primer span, para que sea un botón sin seleccionar:

input[type=checkbox] + label > span,
input[type=radio   ] + label > span{
  display          : inline-block;
  width            : 0.875em;
  height           : 0.875em;
  margin           : 0.25em 0.5em 0.25em 0.25em;
  border           : 0.0625em solid rgb(192,192,192);
  border-radius    : 0.25em;
  background       : rgb(224,224,224);
  background-image :    -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :     -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :      -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :         linear-gradient(rgb(240,240,240),rgb(224,224,224));
  vertical-align   : bottom;
}

En la linea 15 nos aseguramos que el botón este en el fondo, para que cuadre con el texto, en el resto de las lineas le damos un poco de estilo (podeis ir probando para tener otros colores, o cantos mas redondeados.. etc. Si lo deseais un día podemos hacer un artículo más extenso sobre técnicas.

En este ejemplo, cuando se seleccionan los checkbox y radiobuttons hemos optado por invertir los colores. Se lo decimos al css en el siguiente código:

input[type=checkbox]:checked + label > span,
input[type=radio   ]:checked + label > span{
  background-image :    -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :     -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :      -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :         linear-gradient(rgb(224,224,224),rgb(240,240,240));
}

Ahora vamos a mostrar un “tick” en los checkboxes seleccionados:

input[type=checkbox]:checked + label > span:before{
  content     : '✓';
  display     : block;
  width       : 1em;
  color       : rgb(153,204,102);
  font-size   : 0.875em;
  line-height : 1em;
  text-align  : center;
  text-shadow : 0 0 0.0714em rgb(115,153,77);
  font-weight : bold;
}

El selector de la linea 1 usa la pseudo clase :before, con lo que en la linea 2 podemos insertar el simbolo del “tick” dentro del span. En las lineas 3, 4, 6, 7 y 8 mostramos el “tick” como un elemente, mientras que en las lineas 5, 9 y 10 damos estilo al texto.

Finalmente, mostramos un punto dentro de los radio buttons selecionados, aplicando la misma técnica que para los desmarcados del segundo elemento span.

input[type=radio]:checked + label > span > span{
  display          : block;
  width            : 0.5em;
  height           : 0.5em;
  margin           : 0.125em;
  border           : 0.0625em solid rgb(115,153,77);
  border-radius    : 0.125em;
  background       : rgb(153,204,102);
  background-image :    -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :     -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :      -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :         linear-gradient(rgb(179,217,140),rgb(153,204,102));
}

Bueno esperemos que os haya gustado ya que creo que con estas técnicas podemos darle a nuestros formularios un estilo propio y distinguido del resto. Un saludo y hasta la próxima!

Deja un comentario