Reemplazo de imagen de casilla de verificación CSS puro

78

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
1
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
3
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
3
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
40

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
8
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
7
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
3
Los jsfiddles, no hacen nada. Aparece como casillas de verificación normales. Firefox 27.
raveren
3
Lo mismo con Windows (lo siento, tengo que usarlo en el trabajo): funciona en Chrome 35 pero no en Firefox 30.
Michael Scheper