使用CSS在复选框条件下显示和隐藏div

小编典典

使用CSS在复选框条件下显示和隐藏div

css

我想做的是在选中标签+复选框时显示并隐藏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;
}

这是用来向您展示我正在使用的工具的 小提琴 。

提前谢谢你的帮助。

阅读 366

2020-05-16

共1个答案

小编典典

当前CSS中没有父选择器，这就是该代码不起作用的原因。该复选框必须与所讨论的div处于同一级别。是否有CSS父选择器？

您可以将其从标签中取出，以将它们放在此处所示的同一平面上。
这个例子应该工作：

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>

2020-05-16