Wie kann ich graue Kontrollkästchen für eine robuste Styling-Lösung mit CSS-Farben überlagern?

Kontrollkästchen mit CSS gestalten: Eine robuste Lösung

Während verschiedene CSS-Stiltechniken für Kontrollkästchen existieren, sucht diese Untersuchung nach einem robusteren Ansatz, der dies ermöglicht die Überlagerung einer CSS-definierten Farbe auf einem grauen Kontrollkästchen. Dies ist besonders nützlich, wenn Sie mit einer unvorhersehbaren Anzahl von Kontrollkästchen arbeiten, die jeweils eine eindeutige Farbe erfordern, sodass keine Unmengen an Bildern erstellt werden müssen.

Die Lösung besteht darin, ein transparentes PNG-Bild zu verwenden, bei dem die Außenseite weiß ist Das Kontrollkästchen ist teilweise transparent. Dieses Bild wird dann mit einer CSS-Hintergrundfarbe über das Kontrollkästchen gelegt, was zu einem farbigen Kontrollkästchen führt.

Um diesen Ansatz zu implementieren, sind die folgenden CSS-, JS- und HTML-Änderungen erforderlich:

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>

Dieser Ansatz nutzt das Prinzip der Überlagerung eines transparenten Bildes mit einer CSS-Hintergrundfarbe, um farbige Kontrollkästchen zu erzielen. Es bietet eine robuste Lösung für die dynamische Gestaltung von Kontrollkästchen mit verschiedenen Farben, ohne dass eine Vielzahl von Bildern erforderlich ist.

Das obige ist der detaillierte Inhalt vonWie kann ich graue Kontrollkästchen für eine robuste Styling-Lösung mit CSS-Farben überlagern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!