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
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 ]
17 de marzo de 2011 a las 13:31
¿Alguna idea?