我想要做的是当标签和复选框被选中时,显示或隐藏一个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;
}
这里有一个示例,可以帮助你了解我正在处理的内容。
提前感谢您的帮助。
<input type="hidden" name="name" id="id_name_email">
的目的是什么? - tekNorah