显示和隐藏一个div的复选框条件与css

k3bvogb1 于 2023-08-08 发布在其他

关注(0)|答案(2)|浏览(105)

我想做的是当标签+复选框被选中时显示和隐藏一个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**向您展示我正在使用的内容。
提前感谢您的帮助。

css

来源：https://stackoverflow.com/questions/18752134/reveal-and-hide-a-div-on-checkbox-condition-with-css

2条答案

按热度按时间

5hcedyr01#

目前在CSS中没有父选择器，这就是为什么代码不工作。复选框必须与所讨论的div处于同一级别。Is there a CSS parent selector?
您可以将其从标签中取出，将它们放在同一平面上，如图所示。
这个例子应该可以工作：

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

个字符
View on JSFiddle的

赞(0）回复(0）举报 2023-08-08

ccgok5k52#

~ CSS选择器被称为通用兄弟选择器。它只选择前一个选择器的兄弟姐妹（而不是父母或阿姨/叔叔）。
举例来说：

input[type=checkbox]:checked ~ .remove-check {
    display: none;
}

字符串
平均值：
对于选中的任何复选框，隐藏具有类remove-check的任何同级（层次结构中相同级别的元素）。
目前还没有CSS选择器将样式应用到父代。
你将不得不使复选框成为电子邮件div的兄弟，或者使用一些非CSS方法（如JavaScript）来做你想做的事情。

赞(0）回复(0）举报 2023-08-08

我来回答

显示和隐藏一个div的复选框条件与css

2条答案

相关问题

热门标签

最新问答