zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Radiobox:checked soll style auslösen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.05.2023, 13:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.07.2006
Beiträge: 9
handyaner befindet sich auf einem aufstrebenden Ast
Standard Radiobox:checked soll style auslösen

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;}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.05.2023, 17:11
top top ist offline
Benutzer
neuer user
 
Registriert seit: 06.01.2021
Beiträge: 48
top wird schon bald berühmt werden
Standard

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;}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.05.2023, 08:16
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.235
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Man kann auch
Code:
.square:has(radio:checked) {
 background: green;
}
verwenden. Wird aber nur in aktuellen Browsern unterstützt.
Mit Zitat antworten
  #4 (permalink)  
Alt 04.05.2023, 14:40
top top ist offline
Benutzer
neuer user
 
Registriert seit: 06.01.2021
Beiträge: 48
top wird schon bald berühmt werden
Standard

:has() steht auch auf meiner Wunschliste.
Mal schauen wann der Firefox das ohne manuell gesetzten Flag unterstützt: https://caniuse.com/css-has

Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:36 Uhr.