¿es posible poner la imagen en el tipo de entrada = "casilla de verificación"?

Question

Quiero poner una imagen en el fondo de la casilla de verificación & en mi código html pero no funciona, pero funciona en otra propiedad del formulario.

Answer 1

he encontrado la manera de cómo dar imagen para casilla & de radio botón con css puro.

HTML

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label> 

CSS

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

input[type=checkbox] + label { 
    background: #999; 
    height: 16px; 
    width: 16px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
} 

input[type=checkbox]:checked + label { 
    background: #0080FF; 
    height: 16px; 
    width: 16px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
} 

Comprobar esto por más http://css-tricks.com/the-checkbox-hack/,

https://gist.github.com/592332

Answer 2

Coloque la casilla de verificación en un div y coloque una imagen de fondo en dicho div. He aquí un ejemplo:

<div id="backgrounddiv" style="background-image: url('image.gif');"> 
<input id="check_box" type="checkbox" /> 
</div> 

Answer 3

Escribo mi propio código para solucionar este problema. Esto funcionará así. No tenía este código ahora pero escribo de la misma manera aquí en SO.

<div class="checkbox-wrapper"> 
<input type="checkbox" name="value"/> 
<img src="img/blah.png"/> 
</div> 

En CSS vamos a ocultar esta casilla de verificación por hacer es Z-index inferior a la imagen que puse dentro de este código de contenedor. Eventualmente cuando alguien hace clic en la imagen se ve como una casilla de verificación y en la casilla de verificación real se hará clic. en lugar de display:none usando opacity: 0 será mejor. Esto se romperá en IE6 pero no nos importó porque ya no soporto IE6.

En Javascript Puede escribir un evento si desea una implementación diferente (pero similar a la mía). Puede reemplazar la casilla de verificación nativa Html, Radio y seleccionar (select2 es mejor si se queda con Twitter bootstrap) con sus propios controles basados ​​en temas.