Radiobox:checked soll style auslösen

handyaner · #1 (**permalink**) 02.05.2023, 13:50

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

top · #2 (**permalink**) 03.05.2023, 17:11

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>

Beim CSS noch folgende Änderung:

HTML-Code:

input.radiocheck:checked + label.square {background:green;}

cloned · #3 (**permalink**) 04.05.2023, 08:16

Man kann auch

Code:

.square:has(radio:checked) {
 background: green;
}

verwenden. Wird aber nur in aktuellen Browsern unterstützt.

top · #4 (**permalink**) 04.05.2023, 14:40

: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
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit CSS Style	flo007	CSS	3	25.01.2009 17:08
Style Sheet Reihenfolge	laborix	CSS	7	02.09.2007 16:23
Style wird nicht korrekt übernommen	vidar	CSS	4	02.03.2007 12:54
CSS STYLE	umbroboy	CSS	4	10.10.2004 19:04
Style Sheet für mediatype "handheld"	bensen	CSS	1	25.08.2004 02:53