复选框哈克 - 造型标签

我有一个基本复选框黑客样式我的标签有问题。当复选框被选中时，我希望标签的背景变为绿色。 Howevever，我似乎无法找到一个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>

感谢您的帮助！

来源

2017-03-02 Hudson Taylor

input不需要在复选框功能的标签后面工作。只需切换input和label在你的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

来源

2017-03-02 20:19:03

谢谢！这有很大帮助。 –

对于前面的元素没有选择器，只是为了下一个元素（或多个元素），所以您需要在输入之后使用标签，而不是之前。

来源

2017-03-02 20:16:15

复选框哈克 - 造型标签

回答

相关问题