Bei gecheckter Checkbox li einfärben

[Gilles]

Halluu,
Ich probiere zur zeit folgendes und bin gespannt ob es denn tatsächlich funktioniert. Vielleicht wisst ihr ja wie man es umsetzen kann :)

Ich habe ein Formular erstellt.
Innerhalb des Formulars befindet sich eine liste mit Checkboxen.
Wenn nun die Checkbox gecheckt wird, soll der Listenpunkt eingefärbt werden.
Hier mal das HTML

<form action="index.html" method="get">
            <ul>
                <li>
                    <input type="checkbox" name="server[]" value="server1" id="serverListServer1">
                    <label for="serverListServer1">Server1</label>
                </li>
                <li>
          <input type="checkbox" name="server[]" value="server2" id="serverListServer2">
          <label for="serverListServer2">Server2</label>
        </li>
            </ul>
        </form>

Und hier meine ersten CSS Versuche damit

  ul {
                list-style-type: none;
                
            }
            
            li input[checked]{
                background-color: red;
            }

Ich hab schon so das dumme Gefühl, dass es nur mit Javascript funktioniert. Da ich mir nicht sicher bin, würde ich gerne eure Meinung hören, ob das irgend wie lösbar ist mit CSS. (Denn es soll auf jeden Fall auch eine noscript-variante geben)

Danke schonmal :)

 

[kayyy]

versuche es mal mit li input:checked

 

[kayyy]

sehe gerade selber, dass funktioniert nicht. habe mehrere sachen getestet, aber anscheinend musst du es mit js lösen.

aber ist ja auch kla, weil das li nicht im input ist, sondern anders herum.