Reemplazo de imagen de Casilla de verificación CSS puro


Tengo una lista de casillas de verificación en una tabla. (uno de un número de 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 un mejor entendimiento de cómo hacer esto con CSS?

He encontrado este tutorial "CSS ninja", pero tendré que admitir que me resulta un poco complejo. http://www.thecssninja.com/css/custom-inputs-using-css

Por lo que puedo decir, se le permite utilizar un pseudo clase

 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 mostraría por defecto la imagen en el estado OFF y luego agregaría lo siguiente para obtener el ON

 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. He intentado usar la sintaxis personalizada del selector CSS3 para que coincida con mi configuración actual , pero debe faltar algo (Las imágenes son de tamaño 16x16 si eso asuntos)

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 estoy obteniendo la imagen intercambiada esperada por el resultado de la casilla de verificación en la página, pero creo que estoy más cerca.

Author: BoltClock, 2010-09-22

3 answers

Ya estás cerca. Solo asegúrese de ocultar la casilla de verificación y asociarla con una etiqueta de estilo a través de input[checkbox] + label

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

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

 115
Author: arbales,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-26 10:15:29

El uso de javascript parece innecesario si elige CSS3.

Usando el selector :before, puede hacer esto en dos líneas de CSS. (no hay guión involucrado).

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

Nota: en navegadores sin soporte 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; }​

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

Y éste con imágenes:

Http://jsfiddle.net/hqZt6/6 /

 36
Author: Mo Valipour,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-08-07 16:48:31

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

Echa un vistazo a la siguiente biblioteca: https://lokesh-coder.github.io/pretty-checkbox /

Gracias

 3
Author: Vylson silwr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-07-22 19:35:03