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

Question

我使用复选框隐藏了 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>

谢谢你的好心告诉我。

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

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

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

How to show hidden div when input box is checked

html

css

checkbox

show-hide