Reemplazo de imagen para Checkbox

Estoy tratando de usar una imagen personalizada para las casillas de verificación, como se explica en esta pregunta:

Reemplazo puro de la imagen de la checkbox de CSS

Mis casillas de verificación aparecen en una cuadrícula, por lo que no es necesario que haya una etiqueta asociada a ellas. Sin embargo, encuentro que si la etiqueta no está presente, la técnica discutida en esa pregunta no funciona.

Por ejemplo, aquí está el css relevante:

input[type=checkbox] { opacity: 0; } input[type=checkbox] { height: 17px; width: 17px; background: url('/resources/img/checkBox-unchecked.png') 0 0px no-repeat; } input[type=checkbox]:checked { background: url('/resources/img/checkBox-checked.png') 0 0px no-repeat; height: 17px; width: 17px; padding: 0 0 0 0px; } 

Declarar solo una input simple no renderiza la imagen:

  

Sin embargo, si modifico el css, agregando la + label , y agrego una etiqueta a la marca, como se explica en la solución, funciona:

 input[type=checkbox] { opacity: 0; } input[type=checkbox] + label { height: 17px; width: 17px; background: url('/resources/img/checkBox-unchecked.png') 0 0px no-repeat; } input[type=checkbox]:checked + label { background: url('/resources/img/checkBox-checked.png') 0 0px no-repeat; height: 17px; width: 17px; padding: 0 0 0 0px; }  

Esto se rinde como se esperaba.

¿Por qué no funciona la primera solución?

¿Cómo puedo lograr esto sin tener que agregar tags que no son necesarias?

Dejaste lo siguiente en tu primer ejemplo:

 input[type=checkbox] { opacity: 0; } 

Eso lo hará “no render”.

Ahora, habiendo eliminado ese pequeño estilo, probablemente preguntarás

Bien, el control aparece ahora … entonces, ¿por qué no aparece la imagen de fondo?

Esto se debe a que no tiene un control real sobre el estilo de los botones de opción, casillas de verificación, cuadros de combo, controles de carga de archivos, etc. La solución de tags funciona porque felizmente puede diseñar una etiqueta en toda la extensión de css. Los controles que he mencionado? No tanto…

No soy un experto pero, si configura todas las casillas de verificación con opacidad de 0, ¿no ocultará de manera efectiva la casilla completa? Tal vez intente el método mencionado en esta publicación: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/