Html 使用 css 在复选框条件下显示和隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18752134/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reveal and hide a div on checkbox condition with css
提问by Modelesq
What I'm trying to do is reveal and hide a div when the label + checkbox is checked. (CSS only)
我想要做的是在选中标签 + 复选框时显示和隐藏 div。（仅限 CSS）
So if [Sign Up] is clicked (checked). Hide itself(div.remove-check) and reveal the hidden input (div#email). I thought the code I had would be good enough, but it isn't. What am I doing wrong?
所以如果[注册]被点击（选中）。隐藏自身（div.remove-check）并显示隐藏的输入（div#email）。我认为我拥有的代码足够好，但事实并非如此。我究竟做错了什么？
My code:
我的代码：
Html:
网址：
<div class="remove-check">
<label for="reveal-email" class="btn" style="width: 300px"><input type="checkbox" id="reveal-email" role="button" />Sign Up</label>
</div>
<br>
<div id="email">
<form id="email-form" class="nice" action="" method="post">
<input class="input-text required email" type="text" name="EMAIL" id="id_email" placeholder="Email" />
<input type="hidden" name="name" id="id_name_email">
<a class="btn" >Apply</a>
</form>
</div>
CSS:
CSS：
input[type=checkbox]{
visibility: hidden;
}
input[type=checkbox]:checked ~ .remove-check{
display: none;
}
input[type=checkbox]:checked ~ #email{
display: block;
}
#email{
display: none;
}
Here's a fiddleto show you what I'm working with.
这是一个小提琴，向您展示我正在使用的内容。
Thank you for your help in advance.
提前谢谢你的帮助。
回答by Matt Kenefick
Currently there are no parent selectors in CSS, which is why that code doesn't work. The checkbox must be on the same level as div in question. Is there a CSS parent selector?
目前 CSS 中没有父选择器，这就是该代码不起作用的原因。该复选框必须与所讨论的 div 处于同一级别。是否有 CSS 父选择器？
You can take it out of the label to put them on the same plane like shown here.
This example should work:
您可以将其从标签中取出，将它们放在同一平面上，如图所示。
这个例子应该有效：
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked~.remove-check {
display: none;
}
input[type=checkbox]:checked~#email {
display: block;
}
#email {
display: none;
}
/* ------ Just styles ------ */
input[type=text] {
width: 225px;
padding: 12px 14px;
}
body {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
font-size: 14px;
line-height: 1;
color: #222222;
}
.btn {
width: auto;
background: #2ba6cb;
border: 1px solid #1e728c;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
color: white;
cursor: pointer;
display: inline-block;
font-family: inherit;
font-size: 14px;
font-weight: bold;
line-height: 1;
margin: 0;
padding: 10px 20px 11px;
position: relative;
text-align: center;
text-decoration: none;
-webkit-transition: background-color 0.15s ease-in-out;
-moz-transition: background-color 0.15s ease-in-out;
-o-transition: background-color 0.15s ease-in-out;
transition: background-color 0.15s ease-in-out;
}
.btn:hover {
background: #006582;
}<label for="reveal-email" class="btn" style="width: 300px"> Sign Up</label>
<input type="checkbox" id="reveal-email" role="button">
<div id="email">
<form id="email-form" class="nice" action="" method="post">
<input class="input-text required email" type="text" name="EMAIL" id="id_email" placeholder="Email" />
<input type="hidden" name="name" id="id_name_email">
<a class="btn">Apply</a>
</form>
</div>回答by zigdawgydawg
The ~CSS selector is called the General Sibling Selector. It only selects siblings of the preceding selector (not parents or aunts/uncles).
该~CSS选择器被称为通用兄弟选择。它只选择前一个选择器的兄弟姐妹（不是父母或阿姨/叔叔）。
For example:
例如：
input[type=checkbox]:checked ~ .remove-check {
display: none;
}
Means:
方法：
For any checkboxes that are checked, hide any siblings (elements at the same level in the heirarchy) that have the class remove-check.
对于选中的任何复选框，隐藏具有 remove-check 类的所有兄弟（层次结构中同一级别的元素）。
There are currently no CSS selectors that apply styles up the chain to the parents.
目前没有 CSS 选择器将样式链应用到父级。
You will have to either make the checkbox a sibling of the email div or use some non-CSS method (like JavaScript) to do what you want.
您必须将复选框设为电子邮件 div 的同级，或者使用一些非 CSS 方法（如 JavaScript）来执行您想要的操作。
