Casillas de estilo CSS

De acuerdo, 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 esta solución , 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?

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

http://sofes.miximages.com/checkbox/raz13m.png (Dice jpg, pero es un png).

Publicaba 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 usa el css, js de la página a la que vinculó, 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:

 

(green)

(red)

(purple)

Espero que tenga sentido.

Editar:

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

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

Parece que ya lo sabe, pero la solución a la que se vinculó anteriormente reemplaza la checkbox con una etiqueta de intervalo con una imagen para dar el efecto de una checkbox “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.

La respuesta de 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

He encontrado http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ una solución de javascript + css que funciona en win, es decir, win y mac: chrome, safari, firefox, opera. iOS Safari y Chrome.