Casilla de verificación personalizada de HTML / CSS Botón Imagen Problema

He intentado obtener casillas personalizadas para que funcionen con mi sitio. Sin embargo, me encontré con un problema desconcertante con una parte específica de mi HTML.

Aquí está mi código actual: HTML

 

CSS

 input[type="checkbox"] + label, label > input[type="checkbox"] { background: url("../images/override/state_off.png") no-repeat scroll 0 0 transparent; cursor: pointer; } 

Ahora, como puede ver en mi CSS, tengo dos patrones que quiero diseñar. La etiqueta> entrada [tipo = “checkbox”] “patrón” debe aplicarse a mi HTML (que es, de acuerdo con FireBug). Sin embargo, la imagen personalizada no se muestra con la checkbox.

Para resumir, mi pregunta es simple: ¿Por qué la label > input[type="checkbox"] ‘patrón’ label > input[type="checkbox"] no funciona para mi HTML?

Puede personalizar casillas de verificación y botones de radio con solo CSS si lo prefiere. https://www.google.com/search?q=css%20only%20custom%20checkbox . La idea básica es diseñar la etiqueta y ocultar la checkbox real. Al hacer clic en la etiqueta establece / desactiva la checkbox, por lo que se conserva toda la funcionalidad del formulario. El único inconveniente es que las versiones antiguas de IE requieren un elegante repliegue, que proporcionan la mayoría de las soluciones.

Este es uno de esos elementos que los navegadores tienden a no dejar que te guste tanto, y la mayoría de las personas lo reemplazan con javascript.

answere en SO by @ levente-nagy