Cambiar la imagen de verificación de casilla de verificación en la imagen personalizada

Question

Estoy tratando de cambiar la 'imagen de caja' predeterminada de la casilla de verificación con css, pero no está funcionando. ¿Hay alguna manera de esto?

<input type="checkbox" class="class_checkbox"> 

Y en el archivo de clase que hago

.class_checkbox{ 
    background: url("../images/button_bullet_normal.png") no-repeat scroll 0 0 transparent;  
} 

Answer 1

Probar:

<input type="checkbox" class="input_class_checkbox"> 

jQuery

$('.input_class_checkbox').each(function(){ 
    $(this).hide().after('<div class="class_checkbox" />'); 

}); 

$('.class_checkbox').on('click',function(){ 
    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked')) 
}); 

violín: http://jsfiddle.net/cn6kn/

Answer 2

Puede usar CSS puro, sólo tiene que añadir una etiqueta a la casilla de la siguiente manera:

.check_box { 
    display:none; 
} 

.check_box + label{ 
    background:url('images/check-box.png') no-repeat; 
    height: 16px; 
    width: 16px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
} 

.check_box:checked + label{ 
    background:url('images/check-box-checked.png') no-repeat; 
    height: 16px; 
    width: 16px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
} 

Answer 3

he creado un violín usando CSS puro. La respuesta más votada no maneja los eventos de clic y no funcionará bien, porque el valor de la casilla de verificación no cambiará.

Este es mi ejemplo:

http://jsfiddle.net/kEHGN/1/

Básicamente, necesitamos la siguiente html:

<div class="checkbox_wrapper"> 
    <input type="checkbox" /> 
    <label></label> 
</div> 

Y el siguiente CSS:

.checkbox_wrapper{ 
    position: relative; 
    height: 16px; 
    width: 17px; 
} 

input[type="checkbox"] { 
    opacity:0; 
    height: 16px; 
    width: 17px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2; 
} 

input[type="checkbox"] + label{ 
    background:url('../images/unchecked.png') no-repeat; 
    height: 16px; 
    width: 17px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1; 
} 

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

Sólo Compruebe las rutas de las imágenes, y los anchos y las alturas deben ser iguales al ancho a nd altura de las imágenes. En el violín estoy usando imágenes codificadas en base64.

Espero que pueda ser útil.

Answer 4

Aquí hay una forma pura de CSS para cambiar el estilo de su casilla de verificación. Lo encontré realmente útil, ya que ya tenía otras funciones relacionadas exactamente con las mismas casillas de verificación.

http://www.jotform.org/html-elements/css-checkbox-background-color/

de BR

Answer 5

Tal vez sea útil mi muestra con menos.

<div class="custom-checkbox"> 
    <input component="input" type="checkbox"/> 
    <label>Here is caption right to checkbox</label> 
</div> 

    @imgsize: 25px; 
    .custom-checkbox{ 
     position: relative; 

     > input[type="checkbox"] { 

     display:none; 
     position: absolute; 
     top: 0; 
     left: 0; 

      + label{ 

       background:url('../img/unchecked.png') no-repeat 0 0; 
       background-size:@imgsize; 
       height: @imgsize; 
       padding: 4px 0 5px 35px; 
       display: inline-block; 
       -webkit-transition-duration: 0.3s; 
       -moz-transition-duration: 0.3s; 
       transition-duration: 0.3s;   
      } 
     } 
     > input[type="checkbox"]:checked + label{ 

      background:url('../img/checked.png') no-repeat; 
      background-size:@imgsize @imgsize; 
     } 
    } 

Answer 6

Encontré de otra manera, sin usar etiquetas adyacentes o divs adyacentes.

Mi uso fue que tenía un analizador de rebajas que genera esas listas TODO ingeniosas y quería darles estilo.Cambiando el código HTML generado no era una opción, por lo que me ocurrió con esta solución:

dado una casilla de la siguiente manera:

<input type="checkbox" id="cb"> 

puede estilo con visibility: hidden en la casilla de verificación y visibility: visible en :: después, de esta manera:

#cb { 
 
    visibility: hidden; 
 
} 
 

 
input#cb::after { 
 
    visibility: visible; 
 
    content: "F"; 
 
    color: red; 
 
    background: green; 
 
    padding: 8px; 
 
} 
 

 
input#cb:checked::after { 
 
    content: " T "; 
 
    color: green; 
 
    background: red; 
 
}

<!doctype html> 
 
<html> 
 

 
<body> 
 
    <input type="checkbox" id="cb"> 
 
</body> 
 

 
</html>

La casilla de verificación funciona igual que uno normal y puedes darle el estilo que quieras.

Tal vez que va a ayudar someody (y puede crear un marcador, porque no he encontrado nada como esto en la web)