CSS child effect to parent

Crys · 21. April 2014

Ich hab per css die radio-buttons so umgestalltet, dass diese nach echten Buttons aussehen. Das klappt soweit gut:

HTML:

<!DOCTYPE html>
<html><head>
<title>Radio Button Test</title>
<style type='text/css'>

form span {
    border:1px solid #D0D0D0;
    margin-right:10px;
    width:4em;
    text-align:center;
    display:inline-block;
}

form input {
    display:none;
}

form input:checked + span {
    background-color:#911;
    color:#fff;
}

</style></head><body>

<form>
<label><input type='radio' name='test' checked='checked' /><span>eins</span></label>
<label><input type='radio' name='test' /><span>zwei</span></label>
<label><input type='radio' name='test' /><span>drei</span></label>
</form>

</body></html>

Funktioniert ohne Einschränkung!

Ich möchte aber immer minimalistisch programmieren, also möchte ich die span-Selectors auch noch los werden. Nur weiß ich nicht, wie ich es anstellen soll, dass die label-Selectors (parent) sich bei einer Statusänderung (checked) des input-Selectors (child) ändern:

HTML:

<!DOCTYPE html>
<html><head>
<title>Radio Button Test</title>
<style type='text/css'>

form label {
    border:1px solid #D0D0D0;
    margin-right:10px;
    width:4em;
    text-align:center;
    display:inline-block;
}

form input {
    display:none;
}

form input:checked + label {
    background-color:#911;
    color:#fff;
}

</style></head><body>

<form>
<label><input type='radio' name='test' checked='checked' />eins</label>
<label><input type='radio' name='test' />zwei</label>
<label><input type='radio' name='test' />drei</label>
</form>

</body></html>

Keine Änderung bei checked-input!

Wisst ihr wie man das Umsetzten kann?

Ich frage das aus Interesse und etwas dazu zu lernen. Antworten wie "dann benutz den span-Selector" kann man sich sparen.

Daaron · 21. April 2014

Schreib die <input> nicht in das <label>, sondern trenne beide Elemente und verwende beim Label die for="" - Zuweisung.

HTML:

<input name="tld[]" id="opt_tld_0" class="checkbox validate-one-required" value="de" type="checkbox">
<label id="lbl_tld_0" for="opt_tld_0">de</label>

So in der Art...

Jetzt kannst du folgenden Selektor verwenden

Code:

input[type="checkbox"]:checked + label {}

Übrigens: Mach noch eine Prüfung mit iOS (iPad/iPhone). Bei denen funktionieren Label-Clicks nicht korrekt. Für die musst du einen JS-Fallback in irgend einer Form schreiben.

Eagle-PsyX- · 21. April 2014

HTML:

<!DOCTYPE html>
<html><head>
<title>Radio Button Test</title>
<style type='text/css'>
 
form label {
        border:1px solid #D0D0D0;
        margin-right:10px;
        width:4em;
        text-align:center;
        display:inline-block;
}
 
form input[type=radio] {
        display:none;
}
 
form input[type=radio]:checked + label {
        background-color:#911;
        color:#fff;
}
    
 
</style></head><body>
 
<form>
<input type='radio' name='test' id="t1" checked='checked' /><label for="t1" >eins</label>
<input type='radio' name='test' id="t2"  /><label for="t2" >zwei</label>
<input type='radio' name='test' id="t3"  /><label for="t3" >drei</label>    
</form>
 
</body></html>

;-)

Daaron · 21. April 2014

Was übrigens absolut nicht funktioniert:
:before oder :after auf <input> anwenden. Geht nicht, genauso wie bei <img>. Kein Element, dass selbst-schließend ist, kann mit CSS Pseudo-Elementen gefüttert werden.

Crys · 21. April 2014

Vielen Dank euch beiden!
So einfach, wie auch genial

PS: Mit iOS 7.1 funktioniert es auch.

Suche

CSS child effect to parent

Crys

Lt. Commander

Daaron

Fleet Admiral

Eagle-PsyX-

Commander

Daaron

Fleet Admiral

Crys

Lt. Commander

Ähnliche Themen