Marziin111
Neues Mitglied
Hallo,
ich hab mir in html eine Checkbox erstellt und wollte diese nun in CSS stylen.
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
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: