✔ CSS3 Checkbox-Grafiken austauschen

Hey Sempervivum,
ich bin gerade bei den grafischen Checkboxen auf ein Problem gestoßen welches ich nicht lösen kann.
Vielleicht hast du dafür ja auch eine Antwort parat?!

Und zwar musste ich dem Label erstmal die tabindex-Eigenschaft mitgeben damit die Checkbox in der Tabulator-Reihenfolge berücksichtigt wird.
Wenn die Checkbox(das Label) nun den Focus hat kann man den Status der Checkbox mit der Space-Taste leider nicht ändern wie es bei der Standard-Checkbox der Fall ist.

Ich denke das es ohne javascript nicht möglich sein wird dieses Verhalten nachzubauen oder fällt dir was dazu ein?

Freu mich auf eine Antwort ;)

Grüße,
Peter
 
Zuletzt bearbeitet:
Hallo

Du hast den Link zu deiner Seite vergessen. Oder habe ich ihn übersehen?

Momentan kennen wir deinen Quellcode nicht, du scheinst aber gleichzeitig damit überfordert den im Forum genannten Quellcode korrekt in deine Seite einzubinden. Diese Lücke erschwert es sehr dir zu helfen.

Zumindest mir fällt es zudem schwer aus deiner Beschreibung dein eigentliches Problem zu erkennen.

Gruss

MrMurphy
 
Hallo Murphy,

das Problem ergibt sich eigentlich aus dem Thread.
Ursprünglich ging es darum die Standard-Checkbox in einem Formular durch eigene Grafiken auszutauschen was durch Sempervivum auch gelöst wurde.
Nun ist aber durch das Austauschen der Checkbox auch das Standard-Verhalten verloren gegangen das der Status der Checkbox über die Space-Taste geändert werden kann.

Aber falls es dir doch helfen sollte, hier der CSS-Code:
.cb {
display: none;
}

.cbl {
width: 20px;
height: 20px;
display: inline-block;
background-image: url(../images/checkbox_off.png);
background-repeat: no-repeat;
}

.cb:checked + .cbl {
background-image: url(../images/checkbox_on.png);
}

und so siehts im Formular aus:
<tr><td>Mandatory<td><td class="center"><input class="cb" type="checkbox" name="mandatory" id="mandatory" value="1" ><label class="cbl" for="mandatory"></label></td></tr>

Grüße,
Peter
 
Hallo

Du könntest dir etwas Mühe geben, den Quelltext sinnvoll strukturieren und in die dafür vom Forum vorgesehenen Tags setzen.

Dein Quelltext ist Schrott.

Es fehlt das form-Element.

Du mißbrauchst Tabellen zum Layouten.

Das table-Element fehlt.

Das tbody-Element wird bei Fehlen von den Browsern zwar eingefügt, die Eingabe in den Quelltext ist aber sinnvoller.

Du öffnest drei td-Elemente, schließt aber nur eins.

Du verschachtelst unzulässigerweise direkt td-Elemente.

Die Bezeichnung für die Checkbox-Inhalte (in deinem Beispiel wahrscheinlich Mandatory) gehört in das label-Element und nicht an beliebiger Stelle in die Tabelle.

Die Grafiken stehen uns nicht zur Verfügung.

Gruss

MrMurphy
 
Boah, wenn du nix sinnvolles beizutragen hast ausser zu motzen dann lass es doch einfach und troll dich woanders rum!
Weder die Grafiken noch das form-Element haben irgendetwas mit dem Problem zu tun.

Außerdem hat dich niemand gefragt! Ich habe direkt den Sempervivum angesprochen weil er im Gegensatz zu dir auf die eigentliche Problematik eingehen kann..
 
Zuletzt bearbeitet:
Immer mit der Ruhe.

Hier ist ein öffentliches Forum, kein privater 1:1 - Gratissupport, und wenn man keine Verbesserungsvorschläge will sollte man auch nicht posten. Außerdem führen Sachen wie fehlende Form-Tags usw. bei manchen Browsern wirklich dazu, dass es sich anders verhält.

Ergänzung: Fehlende form-Tags können je nach Browser usw. tatsächlich zu Problem führen.
 
Zuletzt bearbeitet:
Hi Sheel,

normalerweise bin ich ja auch sehr höflich. Aber wenn jemand Worte wie Schrott verwendet, sich nicht die Mühe macht den bisherigen Thread zu lesen und gleichzeitig mit keiner einzigen Silbe auf das eigentliche Problem eingeht dann nervt das schon ...
Und das vor dem input eine table und eine form-definition steht ist doch selbstverständlich und hat wie geschrieben nix mit dem problem zu tun..
 
Hallo

Falls du dich durch meine Formulierung angegriffen oder beleidigt fühlen solltest entschuldige ich mich.

Ich bin viel in HTML-/CSS-Foren unterwegs und in der Regel wird eine deutliche Aussage als hilfreich empfunden.

Also neutral: Dein Quelltext ist sachlich falsch. Auf die Bilder habe ich keinen Zugriff. Irgendwelche übergeordneten id oder class, an denen ich das CSS festmachen kann, gibt es nicht. Ein Lösung ist mit dem Quellcode nicht möglich, jedenfalls bin ich damit überfordert.

Mit deinen Angaben kann ich dir deshalb nur mit einer korrekten Lösung helfen. Es ging ja um die Tastaturbedienung. Zur deutlichen Kennzeichnung habe ich dem aktiven Element zusätzlich eine knallige Hintergrundfarbe gegeben.

Die notwendigen CSS-Angaben musst du dann halt selbst in deinen Quellcode übernehmen.

Der gesamte Quelltext befindet sich in der HTML-Datei. Den kannst du also zum Testen einfach komplett übernehmen, bei dir lokal speichern und musst nur die Bildpfade zu deinen Bildern anpassen. Oder du suchst das erforderliche CSS mit den Browserwerkzeugen heraus.

Ich habe zwei Lösungen erstellt, die Radio-Buttons per CSS, die Checkboxen per Hintergrundbild. Persönlich würde ich Iconfonts oder SVG bevorzugen. Das sind aber nur kleine Änderungen.

Hier die Testdatei zum runterladen, testen oder (mit den Browserwerkzeugen) zum spielen:

http://boratb.bplaced.net/index10.html

Es handelt sich um meinen Testwebspace, die Datei wird also nur ein paar Tage bereitstehen, da ich den immer mal wieder aufräume(n muss). Wer daran interesse hat sollte sie also herunterladen und bei sich speichern.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Meine Lösung ist etwas einfacher: Es funktioniert, wenn ich den Tabindex bei der Checkbox notiere und die Checkbox sichtbar mache, indem ich dort das display:none entferne. Offenbar ist die Voraussetzung dafür, dass das Toggeln mit der Leertaste funktioniert, dass die Checkbox den Fokus hat und nicht das Label und wenn die Checkbox unsichtbar ist, kann sie offenbar keinen Fokus bekommen. Dies funktioniert:
Code: 
        <style>
            .cb {
                position: absolute;
                left: -50px;
               
            }
            .cbl {
                display: inline-block;
                background-image: url(images/buttonrightp.png);
                background-repeat: no-repeat;
                width: 100px;
                height: 40px;
                padding-left: 50px;
            }
            .cb:checked + label.cbl {
                background-image: url(images/buttonleftp.png);
            }
            .cb:focus + label.cbl{
                box-shadow: 0 0 5px;

            }
        </style>
        <input class="cb" id="cb1" type="checkbox" tabindex="0"><label class="cbl" for="cb1">Checkbox 1</label>
        <input class="cb" id="cb2" type="checkbox" tabindex="0"><label class="cbl" for="cb2">Checkbox 2</label>
        <input class="cb" id="cb3" type="checkbox" tabindex="0"><label class="cbl" for="cb3">Checkbox 3</label>
        <input class="cb" id="cb4" type="checkbox" tabindex="0"><label class="cbl" for="cb4">Checkbox 4</label>
Um die Checkbox trotzdem unsichtbar zu machen, habe ich sie links neben den Fensterrand / den Rand des umgebenden Containers positioniert. Und die Ausleuchtung des Fokus in das Label gespiegelt.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück