Maison  >  Article  >  interface Web  >  Comment styliser les cases à cocher CSS avec des superpositions de couleurs ?

Comment styliser les cases à cocher CSS avec des superpositions de couleurs ?

Patricia Arquette
Patricia Arquetteoriginal
2024-11-06 16:40:03549parcourir

How to Style CSS Checkboxes with Color Overlays?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn