Estilo CSS mejorado para casillas de verificación

Existen muchas soluciones en línea para diseñar casillas de verificación usando CSS. Sin embargo, si desea una mayor flexibilidad y la capacidad de aplicar diferentes colores a casillas de verificación individuales, considere el siguiente enfoque:

Requisito:
Personalice las casillas de verificación con varios colores sin crear numerosas imágenes.

Solución:
Utilice una imagen PNG transparente con un exterior blanco y una casilla de verificación parcialmente transparente. Aplique un color de fondo especificado por CSS al elemento HTML, lo que dará como resultado una superposición de color en la casilla de verificación.

Código:
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;
}

CSS adicional
Defina diferentes clases de colores y asócielas con colores de fondo.

HTML:

Este método aprovecha la transparencia PNG para lograr el efecto deseado, suponiendo que sea compatible con PNG. Si es necesario, se pueden emplear métodos alternativos, como el uso de capas CSS superpuestas con máscaras GIF.

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