选中输入框时如何显示隐藏的div答案

【问题标题】：How to show hidden div when input box is checked选中输入框时如何显示隐藏的div
【发布时间】：2021-09-17 17:32:15
【问题描述】：

我使用了一个复选框来隐藏 div 中的内容。

我想在选中复选框时显示。

但是当复选框被选中时，隐藏的内容是不可见的。

我只想用css解决。

label:hover, label:active {
    text-decoration: underline;
 }

#forgot-password-toggle {
    display: none;
}

.forgot-password-content {
    height: 5%;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
}

#forgot-password-toggle:checked ~ * .forgot-password-content {
    display: inline;
    height: 5%;
    width: 100%;
    opacity: 1;
    pointer-events: auto;
    cursor: auto;
    visibility: visible;
}

<label for="forgot-password-toggle">
  <input id="forgot-password-toggle" type="checkbox" checked="">
  forget password?</label> <br>

<div class="forgot-password-content">
  <input id="email" type="email" placeholder="Email" required>
  <button onclick="sendEmail()">Send</button>
</div>

感谢您告诉我。

【问题讨论】：

标签： html css checkbox show-hide

【解决方案1】：

这里是解决方案。我刚刚修改了 HTML 和 css。

label:hover, label:active {
    text-decoration: underline;
 }

#forgot-password-toggle {
    display: none;
}

.forgot-password-content {
    height: 5%;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
}

#forgot-password-toggle:checked + label + .forgot-password-content {
    display: inline;
    height: 5%;
    width: 100%;
    opacity: 1;
    pointer-events: auto;
    cursor: auto;
    visibility: visible;
}

   <input id="forgot-password-toggle" type="checkbox">
   <label for="forgot-password-toggle">forget password?</label>

<div class="forgot-password-content">
  <input id="email" type="email" placeholder="Email" required>
  <button onclick="sendEmail()">Send</button>
</div>

【讨论】：

非常感谢。这是我第一次使用该语言，所以我不知道如何解决它，但是您的帮助解决了问题。

【解决方案2】：

label:hover, label:active {
    text-decoration: underline;
 }

input[type=checkbox] {
  display: none;
}

input[type=checkbox] ~ label {
  display: block;
}

input[type=checkbox]:checked ~ label ~ .forgot-password-content { 
  opacity: 0;
  height: 0;
  display: visible;
}

.forgot-password-content {
  display: inline;
    height: 5%;
    width: 100%;
    opacity: 1;
    pointer-events: auto;
    cursor: auto;
    visibility: visible;
}

<input id="forgot-password-toggle" type="checkbox" checked="">
<label for="forgot-password-toggle">forget password?</label>

<br>

<div class="forgot-password-content">
  <input id="email" type="email" placeholder="Email" required>
  <button onclick="sendEmail()">Send</button>
</div>

【讨论】：