Wie kann ich Standard-Kontrollkästchen mithilfe von CSS durch benutzerdefinierte Bilder ersetzen?

Benutzerdefiniertes CSS-Kontrollkästchen-Styling mit Bildersetzung

Sie sind beim Ersetzen des Standard-Kontrollkästchen-Erscheinungsbilds durch benutzerdefinierte Bilder mithilfe von CSS auf eine Hürde gestoßen. Obwohl Sie mit dem CSS-Ninja-Tutorial arbeiten, haben Sie immer noch Schwierigkeiten, das gewünschte Ergebnis zu erzielen.

Zur Verdeutlichung: Bei dieser Technik geht es darum, die zugehörige Beschriftung des Kontrollkästchens zu formatieren, nicht das Kontrollkästchen selbst. Dies ermöglicht eine vollständige Bildanpassung. Sie müssen jedoch darauf achten, das eigentliche Kontrollkästchenelement auszublenden, um zu vermeiden, dass sein natives Erscheinungsbild angezeigt wird.

Hier ist eine Aufschlüsselung des von Ihnen bereitgestellten CSS:

td:not(#foo) > input[type=checkbox] + label {
    background: url('/images/off.png') 0 0px no-repeat;
    height: 16px;
    padding: 0 0 0 0px;
}

Dieses CSS zielt auf die direkt verknüpften Beschriftungen ab mit Kontrollkästchen in Tabellenzellen, die nicht die ID „foo“ haben. Es setzt das Hintergrundbild des Etiketts auf „off.png“, gibt dessen Höhe und Abstand an und positioniert das Bild in der oberen linken Ecke.

Um den „Ein“-Status festzulegen, verwenden Sie dieses CSS:

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

Es zielt auf dieselben Elemente wie zuvor ab, jedoch nur, wenn das Kontrollkästchen aktiviert ist. Diese Regel aktualisiert das Hintergrundbild des Etiketts auf „on.png“.

Vollständiges Beispiel:

Beziehen Sie sich auf den folgenden vollständigen Code und die folgende Demo:

• Gist: http://gist.github.com/592332
• JSFiddle: http://jsfiddle.net/4huzr/

Wichtige Punkte:

• Das Kontrollkästchen immer ausblenden, indem seine Anzeigeeigenschaft auf „none“ gesetzt wird. .
• Formatieren Sie die zugehörige Beschriftung mithilfe der CSS-Selektorsyntax.
• Verwenden Sie „:checked“ Pseudoklasse zur Unterscheidung zwischen aktivierten und nicht aktivierten Zuständen.
• Denken Sie daran, die Größe und Position des Hintergrundbilds innerhalb des Etikettenstils festzulegen.

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