Reine CSS-Checkbox-Image-Ersetzung

78

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.

css checkbox css-selectors Alex C.
quelle
Es gibt ein jQuery-Plugin namens Uniform, das dies sehr gut macht.
Matt Sherman
Leider verwenden wir einen Prototyp und ich kann das nicht ändern (die Auswirkungen wären lähmend). Ich würde nach einem Prototyp-Plugin suchen (ausgefallene Formulare) ... aber ein Teil meines "persönlichen" Ziels ist es, es mit der Nicht-JS-Methode zum Laufen zu bringen. Ich weiß, dass es möglich ist (siehe Tutorial). Ich fühle mich nah ... und ich denke, dass das Wissen darüber, wie es geht, meine Fähigkeit verbessern würde, mit zukünftigen, ähnlichen Aufgaben zu arbeiten. Wenn es unmöglich ist, ein quadratisches Loch zu machen, werde ich natürlich aufgeben und mich einem JS-Trick zuwenden.
Alex C
1
Warten Sie - "Pure CSS" wie in CSS ohne Bilder oder CSS ohne Javascript?
Arbales
oh - ich meinte "semi pure" Ich verwende momentan definitiv Bilder, aber ich nehme an, es wäre möglich, ein "data / mime" -Tag zu verwenden, um das Bild in das CSS einzufügen. (Ich habe kürzlich einen Artikel darüber gesehen, obwohl mir der genaue Ort im Moment entgeht)
Alex C
3
Warten Sie, "Pure CSS" wie in CSS mit Javascript und / oder zusätzlichen Dom-Knoten?
Kanon

Antworten:

124

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/

Arbales
quelle
3
Dies hängt von einem labelElement ab, das fehlen kann. siehe meine Antwort unten.
Mo Valipour
Ich denke, wenn Sie stattdessen die Deckkraft auf 0 setzen, können Sie trotzdem das Tab-Stop-Verhalten erreichen. Nicht 100% auf das tho.
GDBJ
ohne Namen und für jsfiddle.net/ajshres/4huzr/2486 bei Verwendung für große Tabelle könnte nützlich sein, wenn gegen Ajax
Ajay Gopal Shrestha
@ Valipour Einspruch abgelehnt. Wenn Ihr Kontrollkästchen keine Beschriftung hat, bringen Sie eine Beschriftung auf Ihrem Kontrollkästchen an. Das behebt Ihre UI- und WAG-Probleme auf einen Schlag.
J4K3
40

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/

Mo Valipour
quelle
8
Das sieht sehr vielversprechend aus, aber leider scheint es nicht auf Firefox 14.0.1 Mac
Murray Smith
Versuchte dies mit Bildern und es zeigt immer noch die ursprünglichen Kontrollkästchen hinter dem Bild, also nicht sehr gut für kleine oder ungerade geformte Bilder.
Jimbali
7
OK Ich habe gerade herausgefunden, dass dies behoben werden kann, indem das Kontrollkästchen auf visibility: hiddenund :beforeauf gesetzt wird visibility: visible. Ich gehe jedoch davon aus, dass dies die Abwärtskompatibilität beeinträchtigt.
Jimbali
3
Die jsfiddles machen nichts. Wird als normales Kontrollkästchen angezeigt. Firefox 27.
Raveren
3
Gleiches gilt für Windows (muss leider bei der Arbeit verwendet werden): Funktioniert in Chrome 35, jedoch nicht in Firefox 30.
Michael Scheper