Reemplazo de imagen de casilla de verificación CSS puro

Tengo una lista de casillas de verificación en una tabla. (uno de varios CB en la fila)

 <tr><td><input type="checkbox" class="custom_image" value="1" id="CB1" /><label for='CB1'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="2" id="CB2" /><label for='CB2'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="3" id="CB3" /><label for='CB3'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="4" id="CB4" /><label for='CB4'>&nbsp;</label></td></tr>

Me gustaría reemplazar la imagen de la casilla de verificación con un par de imágenes personalizadas de encendido / apagado y me preguntaba si alguien tenía una mejor comprensión de cómo hacer esto con CSS.

Encontré este tutorial de "CSS ninja", pero debo admitir que lo encuentro un poco complejo para mí. http://www.thecssninja.com/css/custom-inputs-using-css

Por lo que puedo decir, puedes usar una pseudoclase

 td:not(#foo) > input[type=checkbox] + label
 {
     background: url('/images/off.png') 0 0px no-repeat;
     height: 16px;
     padding: 0 0 0 0px;
 }

Mi expectativa era que al agregar el CSS anterior, la casilla de verificación al menos por defecto mostraría la imagen en el estado APAGADO y luego agregaría lo siguiente para activar el

 td:not(#foo) > input[type=checkbox]:checked + label {
     background: url('/images/on.png') 0 0px no-repeat;
 }

Desafortunadamente, parece que me estoy perdiendo un paso crítico en alguna parte. Intenté usar la sintaxis del selector CSS3 personalizado para que coincida con mi configuración actual, pero debe faltar algo (las imágenes tienen un tamaño de 16x16 si eso importa)

http://www.w3.org/TR/css3-selectors/#checked

EDITAR: Me faltaba algo en el tutorial donde aplica el cambio de imagen a la etiqueta y no a la entrada en sí. Todavía no obtengo la imagen intercambiada esperada para el resultado de la casilla de verificación en la página, pero creo que estoy más cerca.

css checkbox css-selectors

— Alex C
fuente

Hay un complemento de jQuery llamado Uniform que hace un buen trabajo con esto.

— Matt Sherman

lamentablemente, estamos usando un prototipo y no puedo cambiar eso (los efectos en cadena serían paralizantes). Buscaría un prototipo de complemento (formularios elegantes) ... pero parte de mi objetivo "personal" es hacer que funcione utilizando el método no js. Sé que se puede hacer (ver tutorial) Siento que estoy cerca ... y creo que saber cómo hacerlo mejoraría mi capacidad para trabajar en futuras tareas similares. Obviamente, si es imposible, me rendiré y pasaré a un truco JS de algún tipo.

— Alex C

Espera - ¿"CSS puro" como en CSS sin imágenes o CSS sin Javascript?

— arbales

oh - quise decir "semi puro". Definitivamente estoy usando imágenes en este momento, pero supongo que sería posible usar una etiqueta "data / mime" para poner la imagen dentro del CSS. (Vi un artículo sobre eso recientemente, aunque la ubicación exacta se me escapa en este momento)

— Alex C

Espera, ¿"CSS puro" como en CSS con javascript y / o nodos dom adicionales?

— canon

Respuestas:

124

Ya estás cerca. Solo asegúrate de ocultar la casilla de verificación y asociarla con una etiqueta que diseñes a través deinput[checkbox] + label

Código completo: http://gist.github.com/592332

JSFiddle: http://jsfiddle.net/4huzr/

— arbales
fuente

Esto depende de un labelelemento que puede faltar. mira mi respuesta a continuación.

— Mo Valipour

Creo que si establece la opacidad en 0, aún puede lograr el comportamiento de tabulación. Aunque no al 100%.

— gdbj

sin nombre y para jsfiddle.net/ajshres/4huzr/2486 cuando se usa para una mesa grande podría ser útil cuando se usa contra ajax

— Ajay Gopal Shrestha

@Valipour Objeción rechazada. Si su casilla de verificación no tiene etiqueta, coloque una etiqueta en su casilla de verificación. Eso soluciona sus problemas de UI y WAG al mismo tiempo.

— j4k3

El uso de javascript parece ser innecesario si elige CSS3.

Al usar el :beforeselector, puede hacer esto en dos líneas de CSS. (sin guión involucrado).

Otra ventaja de este enfoque es que no depende de la <label>etiqueta y funciona incluso si falta.

Nota: en los navegadores sin compatibilidad con CSS3, las casillas de verificación se verán normales. (compatible con versiones anteriores).

input[type=checkbox]:before { content:""; display:inline-block; width:12px; height:12px; background:red; }
input[type=checkbox]:checked:before { background:green; }

Puede ver una demostración aquí: http://jsfiddle.net/hqZt6/1/

y este con imágenes:

http://jsfiddle.net/hqZt6/6/

— Mo Valipour
fuente

Esto parece muy prometedor pero, por desgracia, no parece estar funcionando en Firefox 14.0.1 Mac

— Murray Smith

Intenté esto con imágenes y todavía muestra las casillas de verificación originales detrás de la imagen, por lo que no es muy bueno para imágenes pequeñas o de formas extrañas.

— Jimbali

De acuerdo, acabo de descubrir que esto se puede solucionar estableciendo la casilla de verificación a visibility: hiddeny :beforea visibility: visible. Sin embargo, supongo que esto rompe la compatibilidad con versiones anteriores.

— Jimbali

Los jsfiddles, no hacen nada. Aparece como casillas de verificación normales. Firefox 27.

— raveren

Lo mismo con Windows (lo siento, tengo que usarlo en el trabajo): funciona en Chrome 35 pero no en Firefox 30.

— Michael Scheper

Si todavía está buscando más personalización,

Consulte la siguiente biblioteca: https://lokesh-coder.github.io/pretty-checkbox/

Gracias

— Vylson silwr
fuente