无需JS或页面重载，用HTML+CSS实现可扩展输入列表

完全可以按照你的思路落地，核心是用CSS的:checked伪类配合隐藏复选框来控制元素显隐，全程不需要JavaScript。下面是具体实现方案：

实现逻辑 #

预渲染100条带输入框的列表项，默认只展示前10条；每个“添加”按钮关联一个隐藏的复选框，点击按钮时触发复选框选中状态，通过CSS选择器控制下一条列表项和新的添加按钮显示，同时隐藏当前按钮。

完整代码示例 #

HTML 部分 #

<div class="input-list">
  <!-- 默认显示的前10个输入项 -->
  <div class="list-item">
    <input type="text" placeholder="输入内容">
  </div>
  <div class="list-item">
    <input type="text" placeholder="输入内容">
  </div>
  <div class="list-item">
    <input type="text" placeholder="输入内容">
  </div>
  <div class="list-item">
    <input type="text" placeholder="输入内容">
  </div>
  <div class="list-item">
    <input type="text" placeholder="输入内容">
  </div>
  <div class="list-item">
    <input type="text" placeholder="输入内容">
  </div>
  <div class="list-item">
    <input type="text" placeholder="输入内容">
  </div>
  <div class="list-item">
    <input type="text" placeholder="输入内容">
  </div>
  <div class="list-item">
    <input type="text" placeholder="输入内容">
  </div>
  <div class="list-item">
    <input type="text" placeholder="输入内容">
  </div>

  <!-- 第11到100个输入项（默认隐藏），示例只写2个，实际复制到100个即可 -->
  <!-- 第11项组 -->
  <input type="checkbox" id="add-11" class="add-checkbox">
  <label for="add-11" class="add-btn">添加更多</label>
  <div class="list-item hidden">
    <input type="text" placeholder="输入内容">
  </div>

  <!-- 第12项组 -->
  <input type="checkbox" id="add-12" class="add-checkbox">
  <label for="add-12" class="add-btn hidden">添加更多</label>
  <div class="list-item hidden">
    <input type="text" placeholder="输入内容">
  </div>
</div>

CSS 部分 #

.input-list {
  max-width: 400px;
  margin: 20px;
}

.list-item {
  margin-bottom: 10px;
}

.list-item input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.add-btn {
  display: inline-block;
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

.add-checkbox {
  display: none; /* 隐藏复选框，只通过按钮触发状态 */
}

.hidden {
  display: none;
}

/* 第11项触发规则 */
#add-11:checked ~ .list-item.hidden {
  display: block;
}
#add-11:checked ~ .add-btn.hidden {
  display: inline-block;
}
#add-11:checked ~ .add-btn[for="add-11"] {
  display: none;
}

/* 第12项触发规则 */
#add-12:checked ~ .list-item.hidden {
  display: block;
}
#add-12:checked ~ .add-btn.hidden {
  display: inline-block;
}
#add-12:checked ~ .add-btn[for="add-12"] {
  display: none;
}

/* 后续第13到100项，复制上述规则替换对应ID即可，也可以用Sass/Less循环简化编写 */

核心细节说明 #

1. “添加更多”按钮本质是复选框的<label>，点击标签等同于触发复选框的选中状态，完全无JS交互
2. 利用CSS相邻兄弟选择器~，当复选框被选中时，精准控制后续隐藏元素的显隐切换
3. 实际开发中，可以批量复制列表项组结构到100条，CSS规则也可以通过预处理器循环生成，纯手写也能快速完成

这种方案完全满足无JS依赖的要求，100条上限足以覆盖绝大多数业务场景。

内容的提问来源于stack exchange，提问作者caprisonne