Maquillando los input de tipos radio y checkbox.

Una de mis mayores obsesiones en la web son los campos de formulario. Son los elementos menos personalizables del html, ya que siempre nos obligan a utilizar javascript bien para reemplazar ese elemento o para implementar una funcionalidad que se pierde al utilizar css en un desplegable o en un campo de tipo file.

Los navegadores modernos (olvidaros de explorer) y las css avanzadas, nos permiten modificar – en este caso – y sin utilizar javascript, los input de tipo «checkbox» y «radio» con la ayuda de las etiquetas «label», pudiendo personalizarlos hasta límites inimaginables. Como siempre, el límite lo pone nuestra creatividad.

Esto lo conseguimos con esta estructura

Con una imagen similar a esta

Y estas pequeñas líneas de css

Las cuales tienen una explicación muy sencilla.
input[type=checkbox] nos permite seleccionar todos los campos «input» de tipo «checkbox«.

input[type=checkbox] + label nos permite seleccionar todos los campos «input» de tipo «checkbox» y además, el elemento «label» que se encuentre a continuación. No debe haber ningún otro elemento depués del campo «input«.

input[type=checkbox]:checked + label, nos permite seleccionar todos los campos «input» de tipo «checkbox» cuyo atributo «checked» sea igual a «checked» y además, el elemento «label» que se encuentre a continuación.

De esta manera, podemos hacer cosas similares a las que he montado en un ejemplo.

[ ejemplo ] [ descargar ejemplo ]