Verbessertes CSS-Styling für Kontrollkästchen

Es gibt online viele Lösungen für das Styling von Kontrollkästchen mithilfe von CSS. Wenn Sie jedoch mehr Flexibilität und die Möglichkeit wünschen, unterschiedliche Farben auf einzelne Kontrollkästchen anzuwenden, sollten Sie den folgenden Ansatz in Betracht ziehen:

Anforderung:
Kontrollkästchen mit verschiedenen Farben anpassen, ohne zahlreiche Bilder zu erstellen.

Lösung:
Verwenden Sie ein transparentes PNG-Bild mit weißer Außenseite und teilweise transparentem Kontrollkästchen. Wenden Sie eine CSS-spezifizierte Hintergrundfarbe auf das HTML-Element an, was zu einer Farbüberlagerung auf dem Kontrollkästchen führt.

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

Zusätzliches CSS
Definieren Sie verschiedene Farbklassen und verknüpfen Sie sie mit Hintergrundfarben.

HTML:

Diese Methode nutzt PNG-Transparenz, um den gewünschten Effekt zu erzielen, vorausgesetzt, PNG Unterstützung. Bei Bedarf können alternative Methoden eingesetzt werden, beispielsweise die Verwendung von CSS-Ebenen, die mit GIF-Masken überlagert sind.

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