Cambiar estilos de Checkbox y Radio Button con CSS3

Cambiar estilos de Checkbox y Radio Button con CSS3

Español | 7 kb | Codigo Fuente | Free

Descripción:
Veremos una forma rápida y sencilla de cambiar los estilos de los checkbox y radio button con css3, usando el pseudo selector :checked, seremos capaces de apuntar a un elemento basándonos en su estado activo o desactivo(checked o unchecked)


Creación de nuestro HTMLSolo se mostrara esta técnica para un elemento checkbox, pero sera el mismo proceso para los radio button, y se podrá apreciar mejor en el demo.
Comenzamos creando nuestro checkbox seguido de un label

 <input type="checkbox">

 <label>Checkbox</label>

Ahora asociamos el elemento label a nuestro checkbox, esto se hace mediante el uso de for=”" y el id del checkbox

<input type="checkbox" id="c1" name="cc">

<label for="c1"><span></span> Checkbox</label>

También se agrego un <span> dentro del label, se vera el porque al momento de aplicar los estilos.

Estilos CSSAquí es donde empieza la diversión, lo primero que haremos, que es el motivo de este tutorial, sera ocultar el checkbox

input[type="checkbox"]{

    display: none;

}

Una vez realizado esto podemos dar le mas estilos al label, pero mas específicamente al elemento span dentro del label, lo haremos de esta manera con el fin de dar mas control sobre la posición exacta del checkbox.

input[type="checkbox"]{ display: none; }

input[type="checkbox"] + label span{

    display: inline-block;

    width: 19px;

    height: 19px;

    background: url(img/check_radio_sheet.png) left top no-repeat;

}

Como podemos observar hemos aplicado estilos al elemento <span> asignadole una imagen background  de tipo css sprite, y un alto y ancho del mismo tamaño de cada sprite, por lo que sera mas fácil definir cada estado.

Nuestra

 imagen 

Sprite

Y este el estilo completo para el css

input[type="checkbox"]{ display: none; }

input[type="checkbox"] + label span{

    display: inline-block;

    width: 19px;

    height: 19px;

    background: url(img/check_radio_sheet.png) left top no-repeat;

    margin: -1px 4px 0 0;

    vertical-align: middle;

    cursor:pointer;

}

Lo ultimo que necesitamos es proporcionar un estado para el elemento cuando el checkbox este marcado(checked), esto es muy sencillo, basta con echar un vistazo al evento checked desde el css

input[type="checkbox"]{ display: none; }

input[type="checkbox"] + label span{

    display: inline-block;

    width: 19px;

    height: 19px;

    background: url(img/check_radio_sheet.png) left top no-repeat;

    margin: -1px 4px 0 0;

    vertical-align: middle;

    cursor:pointer;

}

input[type="checkbox"]:checked + label span{

    background: url(img/check_radio_sheet.png) -19px top no-repeat;

}

Tener en cuenta que debido a que estamos usando una imagen sprite, lo único que se tiene que hacer es cambiar el background position, notar también que todo lo que tenia que ver con los estilos del elemento span cuando se marca un checkbox, es utilizar el pseudo selector css3 :checked