Comment puis-je superposer des couleurs CSS sur des cases à cocher grises pour une solution de style robuste ?

Styler les cases à cocher avec CSS : une solution robuste

Bien que diverses techniques de style CSS existent pour les cases à cocher, cette enquête recherche une approche plus robuste qui permette la superposition d'une couleur définie par CSS sur une case à cocher grise. Ceci est particulièrement utile lorsqu'il s'agit d'un nombre imprévisible de cases à cocher qui nécessitent chacune une couleur unique, éliminant ainsi le besoin de créer une pléthore d'images.

La solution consiste à utiliser une image PNG transparente, dont l'extérieur est blanc et le la case à cocher est partiellement transparente. Cette image est ensuite superposée sur la case à cocher en utilisant une couleur d'arrière-plan CSS, ce qui donne une case à cocher colorisée.

Pour mettre en œuvre cette approche, les modifications CSS, JS et HTML suivantes sont nécessaires :

JS :

// Change all instances of '== "styled"' to '.search(...)' to handle additional classes
if ((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className.search(/^styled/) != -1) {
    span[a] = document.createElement("span");
    // Add '+ ...' to handle additional classes on the checkbox
    span[a].className = inputs[a].type + inputs[a].className.replace(/^styled/, "");
}

CSS :

.checkbox, .radio {
    width: 19px;
    height: 25px;
    padding: 0px; // Removes padding to eliminate color bleeding around image
    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" class="styled green" /> (green)</p>
<p><input type="checkbox" name="2" class="styled red" /> (red)</p>
<p><input type="checkbox" name="3" class="styled purple" /> (purple)</p>

Cette approche utilise le principe de superposition d'une image transparente avec une couleur d'arrière-plan CSS pour obtenir des cases à cocher colorisées. Il fournit une solution robuste pour styliser dynamiquement des cases à cocher avec différentes couleurs sans avoir besoin d'une multitude d'images.

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!