我想做的是当标签+复选框被选中时显示和隐藏一个div。(仅CSS)
如果你点击了[注册](选中)。隐藏自身(div.remove-check)并显示隐藏的输入(div#email)。我以为我的代码已经足够好了,但事实并非如此。我做错了什么?
我的代码:
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:
input[type=checkbox]{
visibility: hidden;
}
input[type=checkbox]:checked ~ .remove-check{
display: none;
}
input[type=checkbox]:checked ~ #email{
display: block;
}
#email{
display: none;
}
型
这里有一个**fiddle**向您展示我正在使用的内容。
提前感谢您的帮助。
2条答案
按热度按时间5hcedyr01#
目前在CSS中没有父选择器,这就是为什么代码不工作。复选框必须与所讨论的div处于同一级别。Is there a CSS parent selector?
您可以将其从标签中取出,将它们放在同一平面上,如图所示。
这个例子应该可以工作:
个字符
View on JSFiddle的
ccgok5k52#
~
CSS选择器被称为通用兄弟选择器。它只选择前一个选择器的兄弟姐妹(而不是父母或阿姨/叔叔)。举例来说:
字符串
平均值:
对于选中的任何复选框,隐藏具有类remove-check的任何同级(层次结构中相同级别的元素)。
目前还没有CSS选择器将样式应用到父代。
你将不得不使复选框成为电子邮件div的兄弟,或者使用一些非CSS方法(如JavaScript)来做你想做的事情。