选中输入框时如何显示隐藏的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>