Style CSS amélioré pour les cases à cocher

De nombreuses solutions existent en ligne pour styliser les cases à cocher à l'aide de CSS. Toutefois, si vous souhaitez une plus grande flexibilité et la possibilité d'appliquer différentes couleurs à des cases à cocher individuelles, envisagez l'approche suivante :

Exigence :
Personnalisez les cases à cocher avec différentes couleurs sans créer de nombreuses images.

Solution :
Utilisez une image PNG transparente avec un extérieur blanc et une case à cocher partiellement transparente. Appliquez une couleur d'arrière-plan spécifiée par CSS à l'élément HTML, ce qui entraîne une superposition de couleurs sur la case à cocher.

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 supplémentaire
Définissez différentes classes de couleurs et associez-les à des couleurs d'arrière-plan.

HTML :

Cette méthode exploite la transparence PNG pour obtenir l'effet souhaité, en supposant la prise en charge du PNG. Si nécessaire, des méthodes alternatives peuvent être utilisées, telles que l'utilisation de couches CSS superposées avec des masques GIF.

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