Wie ersetze ich Standard-Kontrollkästchenbilder durch benutzerdefinierte Ein/Aus-Bilder mit reinem CSS?

Reines CSS-Ersetzen von Kontrollkästchenbildern

Für Ihre Kontrollkästchenliste möchten Sie die Standard-Kontrollkästchenbilder mithilfe von CSS durch benutzerdefinierte Ein-/Aus-Bilder ersetzen .

Um dies zu erreichen, befolgen Sie diese Schritte:

1. Das Original-Kontrollkästchen ausblenden:

   • CSS-Anzeige verwenden: keine; Eigenschaft, um das native Kontrollkästchen auszublenden.

2. Erstellen Sie eine benutzerdefinierte Beschriftung:

   • Positionieren Sie eine Beschriftung neben dem ausgeblendeten Kontrollkästchen Verwenden Sie die Etiketteneingabe.
   • Dieses Etikett ist für die Anzeige Ihres benutzerdefinierten Etiketts verantwortlich Bilder.

3. Formatieren Sie das Etikett mit Hintergrundbildern:

   • Verwenden Sie Hintergrundbild und die Eingabe[type=Kontrollkästchen ]:aktivierte Pseudoklasse zum Umschalten zwischen Ein und Aus Bilder.

4. Positionieren Sie die Bilder richtig:

   • Passen Sie die Eigenschaft „Hintergrundposition“ an, um die Bilder innerhalb der korrekt auszurichten label.

Vollständiger CSS-Code Beispiel:

input[type=checkbox] {
  display: none; /* Hide the checkbox */
}

input[type=checkbox] + label {
  display: inline-block; /* Position the label next to the checkbox */
  width: 16px; /* Width of the label = Width of the checkboxes */
  height: 16px; /* Height of the label = Height of the checkboxes */
  background-image: url('/images/off.png'); /* Default to "off" image */
  background-position: 0 0;
}

input[type=checkbox]:checked + label {
  background-image: url('/images/on.png'); /* Change image to "on" image when checked */
}

Hinweis: Stellen Sie sicher, dass die Pfade zu Ihren benutzerdefinierten Bildern korrekt sind. Ein vollständiges Arbeitsbeispiel finden Sie im bereitgestellten JavaScript Fiddle and Gist.

Das obige ist der detaillierte Inhalt vonWie ersetze ich Standard-Kontrollkästchenbilder durch benutzerdefinierte Ein/Aus-Bilder mit reinem CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!