Maison > Article > interface Web > Comment styliser les cases à cocher CSS avec des superpositions de couleurs ?
Style des cases à cocher CSS avec superposition de couleurs
L'un des défis lors de la personnalisation des cases à cocher à l'aide de CSS consiste à ajouter une superposition de couleurs pour améliorer l'attrait visuel. Cela peut être particulièrement difficile lorsque plusieurs cases à cocher de couleurs différentes sont requises. Cependant, il existe des solutions efficaces pour résoudre ce problème.
Une approche populaire consiste à créer une image PNG transparente avec une case à cocher partiellement transparente. En modifiant la couleur d'arrière-plan CSS, vous pouvez superposer la couleur souhaitée sur la case à cocher. Cette méthode nécessite la prise en charge du format PNG et suppose la prise en charge de la transparence dans le navigateur.
Implémentation via CSS, JavaScript et HTML :
JavaScript :
// Handle additional classes on the checkbox if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className.search(/^styled/) != -1) { span[a] = document.createElement("span"); // Add additional classes for colors 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; } .green { background-color: green; } .red { background-color: red; }
HTML :
<p><input type="checkbox" name="1">
Exemple jQuery :
Pour une démonstration en direct, reportez-vous à l'exemple jQuery fourni ci-dessous :
http://jsfiddle.net/jtbowden/xP2Ns/
Cette solution utilise une combinaison de CSS , JavaScript et HTML pour obtenir un style de case à cocher interactif avec des superpositions de couleurs.
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!