Casilla de verificación con código CSS de imagen personalizada que no funciona

Estoy tratando de agregar una imagen personalizada a una checkbox y estoy usando este código:

input[type=checkbox] { display:none; } input[type=checkbox] + label { background-image: url("../images/checkbox-bg.png") no-repeat 0 0; height: 16px; width: 16px; display:inline-block; padding: 0 0 0 0px; } 

El camino es correcto pero la imagen ni siquiera se muestra.

Necesito que la imagen aparezca a la izquierda de la etiqueta.

¿Alguien puede ver un problema en el código anterior, por favor?

Gracias

Aquí está el HTML:

  

cuando desee establecer la posición y la opción de repetición para el fondo, debe usar el background lugar de background-image de background-image . También como sé, la posición de fondo debe aparecer antes de repetir la opción. pero no estoy seguro. intentalo.

 background: url("../images/checkbox-bg.png") top left no-repeat; 

y no se olvide, si su selector css está en un archivo de hoja de estilo separado, la ruta de la imagen debe ser relativa a la dirección de su archivo .css. Si colocó su selector css en su página html, la ruta de la imagen debe ser relativa a su archivo html.

Trate de usar en lugar de la imagen de fondo.

 background: url("") no-repeat 0 0; 

Si eso falla agrega también;

 display: block; 

y posicionarlo absolutamente o flotarlo.

Está intentando asignar el formato abreviado de background a la propiedad de background-image .

El seguimiento…

 background-image: url("../images/checkbox-bg.png") no-repeat 0 0; 

… debería ser:

 background: url("../images/checkbox-bg.png") no-repeat 0 0; 

También puedes intentar validar el CSS para ver lo que quiero decir: http://jigsaw.w3.org/css-validator/

Puede leer más sobre la propiedad abreviada de fondo y la propiedad de imagen de fondo en w3C: