チェックボックスハック - ラベルのスタイリング

Question

基本的なチェックボックスのハックで自分のラベルをスタイリングするのに問題があります。このチェックボックスをオンにすると、ラベルの背景が緑色に変わります。どうやら、私は指定された要素を処理する要素をスタイルするCSSセレクタを見つけることができないようです。私は~と+を使ってみました。ここに私のコードは次のとおりです。助けを

* { 
 
    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>

ありがとう！

Answer 1

inputはあなたのチェックボックスの機能が動作するためにラベルの後に来る必要はありません。ちょうどあなたのHTML内inputとlabelを切り替える：

* { 
 
    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

次の要素（または要素）のためだけに、先行要素のセレクタはありませんので、の後にの入力後にラベルを操作する必要があります。