Reine CSS-Checkbox-Image-Ersetzung

Ich habe eine Checkbox-Liste in einer Tabelle. (einer von mehreren CBs in der Reihe)

 <tr><td><input type="checkbox" class="custom_image" value="1" id="CB1" /><label for='CB1'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="2" id="CB2" /><label for='CB2'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="3" id="CB3" /><label for='CB3'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="4" id="CB4" /><label for='CB4'>&nbsp;</label></td></tr>

Ich möchte das Kontrollkästchen durch ein Paar benutzerdefinierte Ein / Aus-Bilder ersetzen und habe mich gefragt, ob jemand ein besseres Verständnis dafür hat, wie dies mit CSS gemacht wird.

Ich habe dieses "CSS Ninja" Tutorial gefunden, aber ich muss zugeben, dass es für mich etwas komplex ist. http://www.thecssninja.com/css/custom-inputs-using-css

Soweit ich das beurteilen kann, dürfen Sie eine Pseudoklasse verwenden

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

Meine Erwartung war, dass durch Hinzufügen des obigen CSS das Kontrollkästchen zumindest standardmäßig das Bild im AUS-Zustand anzeigt und dann Folgendes hinzufügt, um das EIN zu erhalten

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

Leider scheint mir irgendwo ein kritischer Schritt zu fehlen. Ich habe versucht, die benutzerdefinierte CSS3-Auswahlsyntax zu verwenden, um sie an mein aktuelles Setup anzupassen - aber es muss etwas fehlen (die Bilder haben die Größe 16x16, wenn das wichtig ist).

http://www.w3.org/TR/css3-selectors/#checked

BEARBEITEN: Ich hatte etwas im Tutorial vermisst, wo er die Bildänderung auf das Etikett und nicht auf die Eingabe selbst anwendet. Ich erhalte immer noch nicht das erwartete ausgetauschte Bild für das Kontrollkästchen-Ergebnis auf der Seite, denke aber, dass ich näher dran bin.

Du bist schon nah dran. Stellen Sie einfach sicher, dass das Kontrollkästchen ausgeblendet und mit einem Etikett verknüpft ist, über das Sie einen Stil erstelleninput[checkbox] + label

Vollständiger Code: http://gist.github.com/592332

JSFiddle: http://jsfiddle.net/4huzr/

Die Verwendung von Javascript scheint unnötig zu sein, wenn Sie CSS3 wählen.

Mit :beforeSelector können Sie dies in zwei Zeilen CSS tun. (kein Skript beteiligt).

Ein weiterer Vorteil dieses Ansatzes besteht darin, dass er nicht auf <label>Tags basiert und auch dann funktioniert, wenn er fehlt.

Hinweis: In Browsern ohne CSS3-Unterstützung sehen Kontrollkästchen normal aus. (rückwärtskompatibel).

input[type=checkbox]:before { content:""; display:inline-block; width:12px; height:12px; background:red; }
input[type=checkbox]:checked:before { background:green; }​

Eine Demo finden Sie hier: http://jsfiddle.net/hqZt6/1/

und dieser mit Bildern:

http://jsfiddle.net/hqZt6/6/

Wenn Sie noch weitere Anpassungen wünschen,

Überprüfen Sie die folgende Bibliothek: https://lokesh-coder.github.io/pretty-checkbox/

Vielen Dank