input:checked

  • Hab keine Ahnung, wie was ich als Überschrift hätte nehmen sollen :D


    Angelehnt an Erweiterung von Toggle Menü ohne JavaScript für mobile Navigation
    Ich möchte über :checked andere Kontainer beeinflussen.


    Wenn :checked, dann soll das auf ein label folgende obj (hier div) beeinflusst werden.


    wolf hatte mir schon gezeigt, dass es mit nem input und id funktioniert.
    Jetzt versuche ich das Ganze ohne id.


    Mit id funktioniert - klar. Aber ohne wäre es schön einfach dynamisch zu erstellen (PHP-seitig zB)


    Das ist was ich hab:

    CSS
    1. label + div, label > div { /*innere und aeussere default yellow*/
    2. background-color: yellow;
    3. }
    4. label > input:checked + div{ /*innere red, wenn :checked*/
    5. background-color: red;
    6. }
    7. label + div input:checked + div{ /*aeussere red, wenn :checked -- funktioniert so nicht =/ */
    8. background-color: red;
    9. }


    HTML
    1. <label>
    2. click
    3. <input type="checkbox">
    4. <div>change inside</div>
    5. </label>
    6. <div>change outisde</div>


    und live test: https://jsfiddle.net/61b65czk/2/


    Ich bin mir sicher, dass label + div input:checked + div falsch ist :D
    Was ich als Anweisung brauche ist wohl in etwa:
    wenn ein label > input:checked
    dann dieses label + div { ... }
    Bekommt man das hin, oder gibts da doch Grenzen?

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von cottton ()

  • Ne das geht nicht ... außerhalb des wraps vom input ist nichts machbar, nur auf gleicher ebene oder Tiefer im DOM ..
    label + div input:checked + div -> ein div, was nach einem input steht, der in einem div liegt, das nach einem label steht ... das ist falsch :D


    Dynamische genereierung kannst du nur z.B. eine Klasse erreichen die dir die verschiedenen komponenten bereitstellt -> methode zum ausgeben vom label und methode für den input ...
    Irgendwie so ^^

  • Ja, Mist :pinch:
    Hab auch noch zum ~ selector gesucht.
    Aber bei dem siehts wohl genauso aus.
    Schade.
    (andere input-Elemente fallen ja auch raus.)
    Immerhin -- auch mit id ne schöne Sache. (Danke nochmal =)

  • jap .. ~ kann man auch verwenden, dann ist es egal wo der input sich befindet (davor oder danach), hauptsache auf der selben ebene.. allerdings musst du dann die box genau selektieren und kannst nicht einfach ' :checked+div ' machen :D