✔ CSS3 Checkbox-Grafiken austauschen

[pschilling]

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!!

 

[Sempervivum]

Du könntest der Checkbox ein label zuordnen, die Checkbox selber unsichtbar machen und im Label deine Grafik einfügen.

 

[pschilling]

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

 

[Sempervivum]

Bisher noch nicht, aber ich teste es mal ...

 

[Sempervivum]

Dieses:

<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.

 

[pschilling]

Hey, vielen Dank! Das probiere ich direkt mal aus

 

[Sempervivum]

Du musst nur noch im checked-Zustand die Grafik austauschen.

Habe ich auch getestet:

        <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:

        <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>

 

[pschilling]

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...

 

[pschilling]

Ah, den letzten Post hatt ich noch nicht gesehen. Teste sofort

 

[Sempervivum]

Die Grafik wird zwar angezeigt, aber die ursprüngliche Checkbox halt auch noch daneben.

Die originale Checkbox kann man ja unsichtbar machen:

            .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.