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!