CSS Styling Checkboxes

Okay, so I've seen lots of solutions for styling checkboxes via CSS on the web. However, I'm looking for something slightly more robust, and I'm wondering if someone can help. Basically, I want to have this solution, but with the ability to have a CSS-specified color overlaying a gray checkbox. I nee开发者_如何学God this because I will have unpredictable numbers of different checkboxes, each needing a different color, and I don't want to create vast amounts of different images to handle this. Anyone have any ideas on how to achieve this?

I created a transparent png, where the outside is white, and the checkbox is partially transparent. I modified the code to put a backgroundColor on the element, and voila!, a colorized checkbox.

http://i48.tinypic.com/raz13m.jpg (It says jpg, but it's a png).

I would post the example, but I don't know of a good way to show it. Any good sandbox sites out there?

This, of course, depends on png support. You could poorly do this with gif, or put a semi-transparent css layer over the image, like you suggested, and then use a gif mask to mask out the bleed of the colored box. This method assumes transparency support.

My png method uses the css, js from the page you linked to, with these changes:

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>

Hope that makes sense.

Edit:

Here is a jQuery example that illustrates the principle with checkboxes:

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

It sounds like you already know this, but the solution you linked to above actually replaces the checkbox with a span tag with an image to give the effect of a "styled" checkbox.

For most browsers like IE and Firefox, there are few (if any) options and very little support for styling checkboxes with CSS alone.

Jeff B's answer on how to edit the said solution is correct. Here is the implementation of his edit to the solution if someone needs to copy and paste.

JavaScript http://pastebin.com/WFdKwdCt

CSS http://pastebin.com/TM1WwSQW

I've found http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ a javascript + css solution thats works on win ie, win and mac: chrome, safari, firefox, opera. iOS Safari and chrome.