CSS para radiobuttons y checkbox
Si más de uno cree que los radiobuttons o checkbox por defecto son feos, se pueden cambiar con CSS.
El tema es bastante sencillo…. primero debemos crear las imágenes y para los checkbox (por ejemplo) necesitarás la imagen checkeada, descheckeada, y con el focus y sin el focus. Fijate en la siguiente imagen…
Es recomendable crear una sola imagen como ésta, de un ancho y alto establecido, de esta forma podremos utilizar una sola imagen para todos los estados posibles con la propiedad del CSS background-position.
Aplicando las propiedades del CSS…
Primero necesito hacer desparecer los checkbox. Hay varias formas de hacerlo, sin embargo, con el siguiente código funciona tanto para FireFox como para Opera. Ups.. me olvidé decir que con IE NO funciona jejejeje…
input[type="checkbox"], input[type="radio"] {
visibility: hidden;
width: 0px;
height: 0px;
padding: 0px;
margin: 0px;
}
Y a continuación defino que imagen mostraré para cada ocasión…
input[type="checkbox"] + label{ background: url(”fuglychecks.png”) 0 0 no-repeat;}
input[type="checkbox"]:focus + label{ background-position: 0 -16px;}
input[type="checkbox"]:checked + label{ background-position: 0 -32px;}
input[type="checkbox"]:checked:focus + label{background-position: 0 -48px;}
label { padding-left: 20px; height: 16px;}
Cuando tengamos que añadir el objeto, el html será el siguiente…
<input type="checkbox" id="cb1"/><label for="cb1">Check this!</label>