使用css显示和隐藏复选框条件下的div [英] Reveal and hide a div on checkbox condition with css

问题描述

我试图做的是当标签+复选框被选中时显示和隐藏div。 （仅限CSS）

What I'm trying to do is reveal and hide a div when the label + checkbox is checked. (CSS only)

因此，如果点击[注册]（选中）。隐藏自己（div.remove-check）并显示隐藏的输入（div＃email）。我认为代码我已经足够好，但它不是。我做错了什么？

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?

我的代码：

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;
}

这里是 小提琴 来向您展示我的工作。

Here's a fiddle to show you what I'm working with.

感谢您的帮助。

推荐答案

在CSS中没有父选择器，这就是为什么代码不工作。复选框必须与所讨论的div在同一层。 是否有CSS父选择器？

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?

您可以从标签中取出，将它们放在同一个平面上，如此处所示。
这个例子应该工作。 http://jsfiddle.net/Kqscu/4/

You can take it out of the label to put them on the same plane like shown here. This example should work. http://jsfiddle.net/Kqscu/4/

<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>

这篇关于使用css显示和隐藏复选框条件下的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！