如何将 "Close" 按钮添加到纯 CSS 滑动功能中？

Question

我很想应用有趣的代码来构建我的网站，但我仍在努力理解 HTML/CSS 的逻辑。

基本上，我现在正在尝试基于此demo进行编辑，并希望将“点击我”变成具有“关闭”功能的按钮，但我失败了。

我找到了 similar demo，但仍然无法将它们合并在一起。我该怎么办，或者有人可以提出一些建议吗？非常感谢！

 input {
    display: none;
  }

  label {
    margin: 0rem 0rem;
    /*spacing between button and divider*/
    cursor: pointer;
    display: inline-block;
    padding: 0.5rem 1rem 0.5rem 0rem;
    color: rgba(0, 0, 0, 1);
    background: rgba(255, 255, 255, 1);
    -webkit-transition: background-color 0.2s, color 0.2s;
    width: 100%;
  }

  label:hover {
    color: rgba(0, 0, 0, 0.3);
  }

  .hiddentext {
    -webkit-transition: height .3s ease;
    height: 0px;
    overflow: hidden;
    width: 100%;
    background: rgba(255, 255, 0, 1);
  }

  input:checked+.hiddentext {
    height: 800px;
    max-height: 85vh;
  }

  input:checked+.hiddentext {
    height: 800px;
    max-height: 200px;
  }

  #check {
    position: absolute;
    appearance: none;
    cursor: pointer;
  }

  #check+label {
    position: absolute;
    cursor: pointer;
    background: #ff00ff;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    transition: all 500ms ease;
  }

  #check+label:after {
    content: "Open"
  }

  #check:checked+label {
    background: #00ff00;
  }

  #check:checked+label:after {
    content: "Close"
  }

<h2>Title</h2>
<hr>
<div>
  <label for="check">More</label>
  <hr>
  <input name="check" id="check" type="checkbox">
  <div class="hiddentext">
Hidden message
  </div>
</div>

Answer 1

您需要将 <input> 向上移动，因为您的 CSS 使用的是“+”选择器。

您也可以使用 ~ 代替 +。

一个可能的解决方案是这样的：

<h2>Title</h2>
<hr>
<div>
  <input name="check" id="check" type="checkbox">
  <label for="check"></label>
  <hr>
  <div class="hiddentext">
Hidden message
  </div>
</div>

 input {
    display: none;
  }

  label {
    margin: 0rem 0rem;
    /*spacing between button and divider*/
    cursor: pointer;
    display: inline-block;
    padding: 0.5rem 1rem 0.5rem 0rem;
    color: rgba(0, 0, 0, 1);
    background: rgba(255, 255, 255, 1);
    -webkit-transition: background-color 0.2s, color 0.2s;
    width: 100%;
  }

  label:hover {
    color: rgba(0, 0, 0, 0.3);
  }

  .hiddentext {
    -webkit-transition: height .3s ease;
    height: 0px;
    overflow: hidden;
    width: 100%;
    background: rgba(255, 255, 0, 1);
    margin-top: 10px;
  }

  input:checked ~ .hiddentext {
    height: 800px;
    max-height: 200px;
  }

  #check {
    position: absolute;
    appearance: none;
    cursor: pointer;
  }

  #check + label {
    position: absolute;
    cursor: pointer;
    background: #ff00ff;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    transition: all 500ms ease;
  }

  #check + label:after {
    content: "Open"
  }

  #check:checked + label {
    background: #00ff00;
  }

  #check:checked+label:after {
    content: "Close"
  }

如何将 "Close" 按钮添加到纯 CSS 滑动功能中？

How to add a "Close" button into a pure CSS sliding down feature?

html

css

forms

label