|
|||
![]()
Hallo,
ich habe eine Box um Radiobuttons und Label, die grün gefüllt werden soll sobald die Auswahl erfolgen soll. Leider krieg ich dass mit der Bedingung "checked" nicht hin. Könnt ihr mir bitte dabei helfen? HTML-Code:
<label class="square"> <input type="radio" class="radiocheck" name="test"/> <span>Radio number one</span> </label> </br> <label class="square"> <input type="radio" class="radiocheck" name="test"/> <span>Radio number two</span> </label> HTML-Code:
label { display: inline-block; width: 200px; padding: 5px; border-style: solid; border-color:#cfd4dd; border-radius: 4px; padding: 5px 5px 5px 5px; margin-bottom: 8px; } label:active, label:hover, label:focus{ border-style: solid; border-color:#014785; border-radius: 4px; padding: 5px 5px 5px 5px; } .radiocheck input:checked + .square {background:green;} |
Sponsored Links |
|
|||
![]()
Dein Problem ist, dass dein Schalter von dem Label umschlossen ist und du das Aussehen des Labels so nicht anhand des darin liegenden Input-Schalters ändern kannst.
Packe daher dein Input vor dein Label und verknüpfe die beiden mit for= Etwa so: HTML-Code:
<input type="radio" class="radiocheck" name="test" id="schalter01" /> <label class="square" for="schalter01"> <span>Radio number one</span> </label> </br> <input type="radio" class="radiocheck" name="test" id="schalter02" /> <label class="square" for="schalter02"> <span>Radio number two</span> </label> HTML-Code:
input.radiocheck:checked + label.square {background:green;} |
Sponsored Links |
|
|||
![]()
:has() steht auch auf meiner Wunschliste.
Mal schauen wann der Firefox das ohne manuell gesetzten Flag unterstützt: https://caniuse.com/css-has ![]() |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit CSS Style | flo007 | CSS | 3 | 25.01.2009 18:08 |
Style Sheet Reihenfolge | laborix | CSS | 7 | 02.09.2007 17:23 |
Style wird nicht korrekt übernommen | vidar | CSS | 4 | 02.03.2007 13:54 |
CSS STYLE | umbroboy | CSS | 4 | 10.10.2004 20:04 |
Style Sheet für mediatype "handheld" | bensen | CSS | 1 | 25.08.2004 03:53 |