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

1
2
<input id="check_01" type="checkbox" name="check_01" />
<label for="check_01">

Con una imagen similar a esta


Y estas pequeñas líneas de css

1
2
3
4
5
6
7
8
9
10
11
12
input[type=checkbox] {display: none;}
input[type=checkbox] + label {
background: #fff;
display: inline-block;
width: 16px;
height: 16px;
background: url(img/check_02.png) 0px 0px no-repeat;
text-indent: -1000em;
}
input[type=checkbox]:checked + label {
background: url(img/check_02.png) 0px -16px no-repeat;
}

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 ]