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
    label + div, label > div { /*innere und aeussere default yellow*/
        background-color: yellow;
    }
    label > input:checked + div{ /*innere red, wenn :checked*/
        background-color: red;
    }
    label + div input:checked + div{ /*aeussere red, wenn :checked -- funktioniert so nicht =/ */
        background-color: red;
    }


    HTML
    <label>
        click
        <input type="checkbox">
        <div>change inside</div>
    </label>
    <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?

  • 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 ^^

  • 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

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!