CSS Styling Checkboxes

Question

Bien, he visto muchas soluciones para diseñar casillas de verificación a través de CSS en la web. Sin embargo, estoy buscando algo un poco más robusto, y me pregunto si alguien puede ayudar. Básicamente, quiero tener this solution, pero con la capacidad de tener un color especificado por CSS superponiendo una casilla gris. Necesito esto porque tendré números impredecibles de casillas de verificación diferentes, cada una necesita un color diferente, y no quiero crear grandes cantidades de imágenes diferentes para manejar esto. Alguien tiene alguna idea sobre cómo lograr esto?

Answer 1

Creé un png transparente, donde el exterior es blanco, y la casilla de verificación es parcialmente transparente. Modifiqué el código para poner un backgroundColor en el elemento y ¡listo !, una casilla de verificación coloreada.

http://i48.tinypic.com/raz13m.jpg (Dice jpg, pero es un png).

Yo publicaría el ejemplo, pero no sé de una buena manera de mostrarlo. ¿Hay algún buen sitio de sandbox?

Esto, por supuesto, depende del soporte png. Podría hacer mal esto con gif, o poner una capa de CSS semitransparente sobre la imagen, como sugirió, y luego usar una máscara gif para enmascarar el sangrado del cuadro de color. Este método supone soporte de transparencia.

Mi método png utiliza el CSS, JS de la página que está conectado, con estos cambios:

JS:

// Changed all instances of '== "styled"' to '.search(...)' 
    // to handle the additional classes needed for the colors (see CSS/HTML below) 
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className.search(/^styled/) != -1) { 

    span[a] = document.createElement("span"); 

      // Added '+ ...' to this line to handle additional classes on the checkbox 
    span[a].className = inputs[a].type + inputs[a].className.replace(/^styled/, ""); 

CSS:

.checkbox, .radio { 
    width: 19px; 
    height: 25px; 
    padding: 0px; /* Removed padding to eliminate color bleeding around image 
     you could make the image wider on the right to get the padding back */ 
    background: url(checkbox2.png) no-repeat; 
    display: block; 
    clear: left; 
    float: left; 
} 

.green { 
    background-color: green; 
} 

.red { 
    background-color: red; 
} 

etc... 

HTML:

<p><input type="checkbox" name="1" class="styled green"/> (green)</p> 
<p><input type="checkbox" name="2" class="styled red" /> (red)</p> 
<p><input type="checkbox" name="3" class="styled purple" /> (purple)</p> 

Espero que m tiene sentido.

Editar:

Aquí es un ejemplo de jQuery que ilustra el principio con casillas de verificación: La respuesta de

http://jsfiddle.net/jtbowden/xP2Ns/

Answer 2

Parece que ya lo sabe, pero la solución a la que se vinculó anteriormente en realidad reemplaza la casilla con una etiqueta de intervalo con una imagen para dar el efecto de una casilla de verificación "estilo".

Para la mayoría de los navegadores como IE y Firefox, hay pocas opciones (si las hay) y muy poco soporte para el diseño de casillas de verificación con solo CSS.

Answer 3

Jeff B sobre cómo editar dicha solución es correcta. Aquí está la implementación de su edición a la solución si alguien necesita copiar y pegar.

JavaScript http://pastebin.com/WFdKwdCt

CSS http://pastebin.com/TM1WwSQW

Answer 4

que he encontrado la solución + css http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ un javascript eso funciona en Win es decir, ganar y Mac: Chrome, Safari, Firefox, Opera. iOS Safari y Chrome.