Estilo CSS aprimorado para caixas de seleção

Existem muitas soluções online para estilizar caixas de seleção usando CSS. No entanto, se você deseja maior flexibilidade e a capacidade de aplicar cores diferentes a caixas de seleção individuais, considere a seguinte abordagem:

Requisito:
Personalize caixas de seleção com várias cores sem criar inúmeras imagens.

Solução:
Utilize uma imagem PNG transparente com exterior branco e caixa de seleção parcialmente transparente. Aplique uma cor de fundo especificada pelo CSS ao elemento HTML, resultando em uma sobreposição de cores na caixa de seleção.

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;
}

CSS adicional
Defina diferentes classes de cores e associe-as às cores de fundo.

HTML:

Este método aproveita a transparência PNG para obter o efeito desejado, assumindo suporte PNG. Se necessário, métodos alternativos podem ser empregados, como o uso de camadas CSS sobrepostas com máscaras GIF.

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