Comment styliser des cases à cocher avec différentes couleurs en utilisant CSS ?

Style CSS amélioré pour les cases à cocher

De nombreuses solutions existent en ligne pour styliser les cases à cocher à l'aide de CSS. Cependant, si vous désirez 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 l'élément HTML. 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éfinir différentes classes de couleurs et associer avec des couleurs d'arrière-plan.

HTML :

<p><input type="checkbox" name="1">

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 calques CSS superposés avec des masques GIF.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!