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

Reines CSS-Ersetzen von Kontrollkästchenbildern

In einer HTML-Tabelle mit einer Kontrollkästchenliste möchten Sie möglicherweise das Standard-Kontrollkästchenbild durch benutzerdefinierte Ein-/Aus-Bilder ersetzen. CSS kann genutzt werden, um diese ästhetische Verbesserung zu erreichen.

Benutzerdefinierte CSS-Eingabetechnik

Wie von „CSS Ninja“ erwähnt, besteht ein Ansatz darin, eine Pseudoklasse zu verwenden, um die mit dem Kontrollkästchen verknüpfte Beschriftung zu formatieren. und nicht das Kontrollkästchen selbst. Dadurch wird sichergestellt, dass das Bild an der richtigen Position angezeigt wird und auf den Status des Kontrollkästchens reagiert.

CSS-Code-Implementierung

Nachstehend finden Sie den vollständigen CSS-Code, der das eigentliche Kontrollkästchen ausblendet und mit ihm verknüpft ein gestaltetes Etikett:

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label {
  display: block;
  width: 16px;
  height: 16px;
  background: url('/images/off.png') 0 0px no-repeat;
}

input[type="checkbox"]:checked + label {
  background: url('/images/on.png') 0 0px no-repeat;
}

Hier ist eine Aufschlüsselung des Codes:

• Die Das Kontrollkästchen (input[type="checkbox"]) wird mit display: none; ausgeblendet.
• Die mit dem Kontrollkästchen verknüpfte Beschriftung (input[type="checkbox"] label) ist so gestaltet, dass sie eine Blockanzeige aufweist. eine Breite und Höhe von 16 Pixel und ein Hintergrundbild des „Aus“-Zustandsbilds.
• Wenn das Kontrollkästchen aktiviert ist (input[type="checkbox"]:checked), wird ein neues Hintergrundbild von Das „Ein“-Statusbild wird auf das Etikett angewendet.

Ergebnis

Dieser CSS-Code ersetzt erfolgreich das Standard-Kontrollkästchenbild durch benutzerdefinierte Ein-/Aus-Bilder und sorgt so für eine bessere Optik ansprechende und anpassbare Checkbox-Liste. Sie können mit verschiedenen Bilddesigns experimentieren, um sie an Ihre spezifische Webdesign-Ästhetik anzupassen.

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