Imágenes personalizadas para checkbox?

Me gustaría mostrar la checkbox como botón de alternar. Pero no puedo aplicarle mis imágenes personalizadas con CCS; aún está marcada la checkbox. ¿Cómo realizar esta tarea?

Mi CSS:

input[type=checkbox]#settingsbutton { border-style: none; background-color: transparent; width: 42px; height: 40px; display: block; } input[type=checkbox].button-settings { background-image: url("images/button-settings-normal.png"); } input[type=checkbox].button-settings:active { background-image: url("images/button-settings-normal.png"); } input[type=checkbox].button-settings:hover { background-image: url("images/button-settings-hover.png"); } input[type=checkbox].button-settings:active { background-image: url("images/button-settings-pressed.png"); } 

Mi HTML:

     

Si lo desea, con la solución css pura, debe agregar una label en su label . Es un trick y escribe esto:

 input[type=checkbox]{ display:none; } input[type=checkbox] + label{ height: 40px; width: 42px; } body:not(#foo) input[type=checkbox]:checked + label{ background-image: url("images/button-settings-normal.png"); } body:not(#foo) input[type=checkbox] + label{ background-position:0 -46px; /* as per your requirement*/ height: 40px; } 

HTML

     

Lee estos artículos:

http://www.thecssninja.com/css/custom-inputs-using-css

http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/

Pero no funciona en IE8 y abajo.

Vea este enlace para casillas de verificación de estilo: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

La solución consiste en ocultar la checkbox y agregar un elemento de estilo en lugar de la misma, lo que emula el comportamiento de la checkbox.

Prueba esta solución si tienes algún texto en la etiqueta.

 input[type=checkbox]{ display:none; } input[type=checkbox] + label:before{ height: 42px; width: 42px; content: url("../img/chk.jpg"); } body input[type=checkbox]:checked + label:before{ content: url("../img/chk_checked.jpg"); }