Checkbox Hack - Styling des Labels

Question

Ich habe Probleme, mein Label mit einem einfachen Checkbox-Hack zu gestalten. Wenn das Kontrollkästchen aktiviert ist, möchte ich, dass der Hintergrund des Labels grün wird. Ich finde jedoch keinen CSS-Selektor, der ein Element formatiert, das mit dem angegebenen Element fortfährt. Ich habe versucht, ~ und + zu verwenden. Hier ist mein Code:

* { 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    font-family: monospace; 
 
} 
 

 
input[type=checkbox] { 
 
    position: absolute; 
 
    top: -9999px; 
 
    left: -9999px; 
 
} 
 

 
label { 
 
    position: relative; 
 
    cursor: pointer; 
 
    display: block; 
 
    height: 70px; 
 
    width: 70px; 
 
    background: #eee; 
 
    padding-top: 22px; 
 
    border-radius: 1px; 
 
    z-index: 1; 
 
} 
 

 
label span { 
 
    display: block; 
 
    height: 4px; 
 
    width: 27px; 
 
    background: #333; 
 
    margin: 4px auto; 
 
    border-radius: 1px; 
 
} 
 

 
nav { 
 
    position: absolute; 
 
    top: 0; 
 
    opacity: 0; 
 
    display: flex; 
 
    background-color: #18bc9c; 
 
    width: 100%; 
 
    text-align: center; 
 
    line-height: 80px; 
 
    font-size: 2em; 
 
    height: 100%; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    transition: opacity 0.5s ease-in-out; 
 
} 
 

 
input[type=checkbox]:checked ~ nav { 
 
    opacity: 1; 
 
} 
 

 
input[type=checkbox]:checked + label { 
 
    background: #18bc9c !important; 
 
}

<label for="nav"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
</label> 
 
<input type="checkbox" id="nav"> 
 
<nav> 
 
    <p>Home</p> 
 
    <p>About</p> 
 
    <p>Contact</p> 
 
</nav>

Danke für die Hilfe!

Answer 1

Die input muss nicht nach dem Label für Ihre Checkbox-Funktion zu arbeiten. Schalten Sie einfach den input und label in Ihrem HTML:

* { 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    font-family: monospace; 
 
} 
 

 
input[type=checkbox] { 
 
    position: absolute; 
 
    top: -9999px; 
 
    left: -9999px; 
 
} 
 

 
label { 
 
    position: relative; 
 
    cursor: pointer; 
 
    display: block; 
 
    height: 70px; 
 
    width: 70px; 
 
    background: #eee; 
 
    padding-top: 22px; 
 
    border-radius: 1px; 
 
    z-index: 1; 
 
} 
 

 
label span { 
 
    display: block; 
 
    height: 4px; 
 
    width: 27px; 
 
    background: #333; 
 
    margin: 4px auto; 
 
    border-radius: 1px; 
 
} 
 

 
nav { 
 
    position: absolute; 
 
    top: 0; 
 
    opacity: 0; 
 
    display: flex; 
 
    background-color: #18bc9c; 
 
    width: 100%; 
 
    text-align: center; 
 
    line-height: 80px; 
 
    font-size: 2em; 
 
    height: 100%; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    transition: opacity 0.5s ease-in-out; 
 
} 
 

 
input[type=checkbox]:checked~nav { 
 
    opacity: 1; 
 
} 
 

 
input[type=checkbox]:checked+label { 
 
    background: #18bc9c !important; 
 
}

<input type="checkbox" id="nav"> 
 
<label for="nav"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
</label> 
 
<nav> 
 
    <p>Home</p> 
 
    <p>About</p> 
 
    <p>Contact</p> 
 
</nav> 
 
Run code snippetCopy snippet to answer

Answer 2

Es gibt keine Auswahl für das vorhergehende Element, nur für das nächste Element (oder Elemente), so dass Sie mit der Bezeichnung nach Ihre Eingabe arbeiten müssen, nicht vorher.