Wie gestalte ich Kontrollkästchen mithilfe von CSS in verschiedenen Farben?

Verbessertes CSS-Styling für Kontrollkästchen

Online gibt es viele Lösungen für das Styling von Kontrollkästchen mithilfe von CSS. Wenn Sie jedoch mehr Flexibilität und die Möglichkeit wünschen, unterschiedliche Farben auf einzelne Kontrollkästchen anzuwenden, sollten Sie den folgenden Ansatz in Betracht ziehen:

Anforderung:
Kontrollkästchen mit verschiedenen Farben anpassen, ohne zahlreiche Bilder zu erstellen.

Lösung:
Verwenden Sie ein transparentes PNG-Bild mit weißer Außenseite und teilweise transparentem Kontrollkästchen. Wenden Sie eine CSS-spezifizierte Hintergrundfarbe auf das HTML-Element an, was zu einer Farbüberlagerung auf dem Kontrollkästchen führt.

Code:
JavaScript:

// Check for checkbox and apply CSS classes
if (inputs[a].type == "checkbox" || inputs[a].type == "radio" && inputs[a].className.search(/^styled/) != -1) {
  span[a] = document.createElement("span");
  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;
}

Zusätzliches CSS
Definieren Sie verschiedene Farbklassen und verknüpfen Sie sie mit Hintergrundfarben.

HTML:

<p><input type="checkbox" name="1">

Diese Methode nutzt PNG-Transparenz, um den gewünschten Effekt zu erzielen, sofern PNG-Unterstützung vorausgesetzt wird. Bei Bedarf können alternative Methoden eingesetzt werden, beispielsweise die Verwendung von CSS-Ebenen, die mit GIF-Masken überlagert sind.

Beispiel (jQuery):
https://jsfiddle.net/jtbowden/xP2Ns /

Das obige ist der detaillierte Inhalt vonWie gestalte ich Kontrollkästchen mithilfe von CSS in verschiedenen Farben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!