• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage CSS Checkbox

Marziin111

Marziin111

Neues Mitglied
Hallo,

ich hab mir in html eine Checkbox erstellt und wollte diese nun in CSS stylen.

HTML: 
<div class="ud_auswahlbox gc_400"><input type="radio" name="budget[]" value="400 €" class="ud_auswahl" id="gc_400"><label for="gc_400"></label></div>

Code: 
.ud_auswahlbox { border: 1px solid black; border-radius: 5px; width: 100px; height: 100px; display: inline-block; margin: 0 10px 10px 0; position: relative}
.ud_auswahlbox:hover {border: 1px solid rgba(0,147,255,1.00); border-radius: 5px;}
.ud_auswahlbox label { width: 100px; height: 100px; position: absolute; cursor: pointer;}
.ud_auswahlbox input[type="radio"] { visibility: hidden}
.ud_auswahlbox input[type="checkbox"] { visibility: hidden}
.ud_auswahlbox input[type="radio"]:checked + .ud_auswahlbox { border: 2px solid rgba(0,147,255,1.00); border-radius: 5px;}
.ud_auswahlbox input[type="checkbox"]:checked + .ud_auswahlbox { border: 2px solid rgba(0,147,255,1.00); border-radius: 5px;}

/* Budget */
#budget .gc_400 label { width: 50px; height: 50px; position: absolute; background-color: grey;}
#budget .gc_800 label { width: 50px; height: 50px; position: absolute; background-color: grey;}
#budget .gc_1200 label { width: 50px; height: 50px; position: absolute; background-color: grey;}

Das Problem ist, dass beim Anklicken ichts passiert, obwohl der Rahmen hätte blau werden sollen.

Live-Preview

Was habe ich falsch gemacht?

Grüße
 
Zuletzt bearbeitet:
Werbung:
Marziin111 schrieb:
Was habe ich falsch gemacht?
Zum Vergrößern anklicken....
Mit dem Nachbarselektor e + f (siehe https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator/Nachbarselektor ) kann nicht das Elternelement .ud_auswahlbox angesprochen werden. Grundsätzlich kann auch nicht innerhalb der HTML-Struktur "rückwärts" nach oben selektiert werden.

Beziehe mich hier nun auf <input type="radio">.

Mit Hilfe von Firebug folgendes ergänzt und umgestellt:
CSS: 
.ud_auswahlbox { border: 1px solid black; border-radius: 5px; box-sizing: border-box; width: 100px; height: 100px; display: inline-block; margin: 0 10px 10px 0; position: relative}
.ud_auswahlbox label { width: 100px; height: 100px; box-sizing: border-box; position: absolute; left: 0; top: 0; cursor: pointer;}
.ud_auswahlbox input[type="radio"]:checked + label { border: solid 1px rgba(0,147,255,1.00); border-radius: 5px;}
Da hier mittels des Nachbarselekors der Rahmen von <label> formatiert wird, empfiehlt es sich, von Beginn an den Rahmen für dieses Element zu definieren, anstatt für das umschließende <div>, um den Konflikt der beiden überlagernden Rahmen zu vermeiden.

Siehe dazu https://jsfiddle.net/spicelab/axv25vx9/
 
Zuletzt bearbeitet:
Hallo,

vielen Dank für deine Hilfe! Klappt nun hervorragend.

aber mit dem Seelektor ">" lässt sich doch nach oben selektieren oder sehe ich das falsch?

Grüße
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben