複選框哈克 - 造型標籤

我有一個基本複選框黑客樣式我的標籤有問題。當複選框被選中時，我希望標籤的背景變爲綠色。 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

複選框哈克 - 造型標籤

回答

相關問題