Enhanced CSS Styling for Checkboxes

Many solutions exist online for styling checkboxes using CSS. However, if you desire greater flexibility and the ability to apply different colors to individual checkboxes, consider the following approach:

Requirement:
Customize checkboxes with various colors without creating numerous images.

Solution:
Utilize a transparent PNG image with a white exterior and partially transparent checkbox. Apply a CSS-specified background color to the HTML element, resulting in a color overlay on the checkbox.

Code:
JavaScript:

// Check for checkbox and apply CSS classes
if (inputs[a].type == "checkbox" || inputs[a].type == "radio" && inputs[a].className.search(/^styled/) != -1) {
  span[a] = document.createElement("span");
  span[a].className = inputs[a].type   inputs[a].className.replace(/^styled/, "");
}

CSS:

.checkbox, .radio {
  width: 19px;
  height: 25px;
  padding: 0px;
  background: url(checkbox2.png) no-repeat;
  display: block;
  clear: left;
  float: left;
}

Additional CSS
Define different color classes and associate them with background colors.

HTML:

This method leverages PNG transparency to achieve the desired effect, assuming PNG support. If necessary, alternative methods can be employed, such as using CSS layers overlaid with GIF masks.

Example (jQuery):
https://jsfiddle.net/jtbowden/xP2Ns/