CSS3 Checkbox-Grafiken austauschen

pschilling

Erfahrenes Mitglied
Hi zusammen,

ich habe zwar schon einige Lösungsansätze dazu im Internet gefunden aber leider hat keine davon hat das gewünschte Resultat erbracht :(

Und zwar möchte ich die Standard-Form-Input-Checkbox-Grafiken durch eigene Grafiken austauschen.

So verwende ich die Checkbox:
<td><input class="imgCheckbox" type="checkbox" name="Pflichtfeld" value="1"></td>

Hat das schon mal jemand realisiert?

Wäre echt top, wenn mir da jemand auf die Sprünge helfen könnte :)

Grüße,
Peter

P.S. Ich verwende kein Javascript In meiner Web-Applikation!!
 
Hi Sempervivum,

ich habe so was ähnliches auch mal versucht mit dem Resultat, dass ich immer neben die Grafik klicken musste um den Status der Checkbox zu ändern.
Wenn du es auf diese Weise schon mal hinbekommen hast würde ich mich über ein bisschen Beispiel-Code freuen ;)
 
Dieses:
HTML:
<input id="cb" type="checkbox"><label for="cb"><img src="images/buttonrightp.png"></label>
funktioniert einwandfrei, die Checkbox ändert ihren Status wenn ich auf die Grafik klicke. Du musst nur noch im checked-Zustand die Grafik austauschen. Mit reinem CSS geht das, wenn Du sie als Hintergrund einbindest.
 
Du musst nur noch im checked-Zustand die Grafik austauschen.
Habe ich auch getestet:
HTML:
        <style>
            #cbl {
                display: inline-block;
                background-image: url(images/buttonrightp.png);
                background-repeat: no-repeat;
                width: 100px;
                height: 40px;
            }
            #cb:checked + #cbl {
                background-image: url(images/buttonleftp.png);
            }
        </style>
        <input id="cb" type="checkbox"><label id="cbl" for="cb"></label>
Edit: Man kann es noch etwas geschickter mit Klassen und Tag-Namen machen, damit es auch für mehrere Checkboxes mit dem selben CSS funktioniert:
HTML:
        <style>
            .cbl {
                display: inline-block;
                background-image: url(images/buttonrightp.png);
                background-repeat: no-repeat;
                width: 100px;
                height: 40px;
            }
            .cb:checked + label {
                background-image: url(images/buttonleftp.png);
            }
        </style>
        <input class="cb" id="cb1" type="checkbox"><label class="cbl" for="cb1"></label>
        <input class="cb" id="cb2" type="checkbox"><label class="cbl" for="cb2"></label>
 
Zuletzt bearbeitet:
Hey Sempervivum,

also so ein ähnliches Resultat hatte ich bereits mal.
Die Grafik wird zwar angezeigt, aber die ursprüngliche Checkbox halt auch noch daneben.
Und was noch blöder ist, je nach Browser hab ich ein unterschiedliches Verhalten :/
Beim Chrome und Opera kann ich z.B. auf beides (Grafik und ursprüngliche Checkbox) klicken um den Status zu ändern, beim Internet-Explorer nur auf die Checkbox.
Der reagiert beim Klick auf die Grafik gar net...
 
Die Grafik wird zwar angezeigt, aber die ursprüngliche Checkbox halt auch noch daneben.
Die originale Checkbox kann man ja unsichtbar machen:
CSS:
            .cb {
                display: none;
            }
Ich habe meinen Code jetzt auch im IE11 getestet und er funktioniert dort einwandfrei: Ich kann irgendwo in das Label klicken, auf die Grafik oder daneben, und der Status ändert sich.
 
Zurück