可用原生 HTML 的 details 和 summary 实现可折叠隐私条款，将 checkbox 放在 details 外部同级或 label 内并通过 for 关联，避免嵌套在 summary 中导致点击失效，兼顾可访问性与表单验证。

如何用原生 HTML + CSS 实现可折叠的隐私条款复选框

不需要 JavaScript 就能实现——关键在于 details 和 summary 的组合使用，再配合 input[type="checkbox"] 的语义化嵌套。很多人误以为必须写 JS 才能收起条款，其实浏览器原生支持已足够可靠。

为什么不能把 input 直接放在 summary 里

summary 元素默认是交互式容器，会劫持点击事件，导致复选框无法正常勾选。常见错误现象是：点复选框没反应，或者点了直接展开/收起但勾选状态不变。

• 正确做法是把 input 放在 details 内部、summary 同级，再用 CSS 定位或视觉隐藏调整布局
• 或者将 input 放在 summary 外层包裹的 label 中，并用 for 属性关联
• 不要尝试用 pointer-events: none 去“透传”点击——这会破坏可访问性，屏幕阅读器无法识别

最小可用代码结构（含无障碍支持）

<details>
  <summary>查看隐私条款</summary>
  <p>我们不会出售您的数据……</p>
</details>
<label>
  <input type="checkbox" name="agree" required>
  我已阅读并同意上述条款
</label>

注意两点：details 和 input 是分离的，但语义上需明确关联；required 属性只对表单提交校验有效，不能强制用户先展开条款——这是设计约束，不是 bug。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

折叠状态影响表单验证的现实问题

用户可能跳过展开直接勾选，导致根本没看条款。纯前端无法 100% 强制阅读，但可以提升提示强度：

立即学习“前端免费学习笔记（深入）”；

• 用 :has(> details[open]) 检测是否已展开，再结合 :invalid 控制样式（Chrome 115+、Safari 16.4+ 支持）
• 提交时用 form.addEventListener('submit', ...) 检查 details.open === false 并 alert() 或聚焦到 details
• 别依赖 visibility: hidden 或 display: none 隐藏条款内容——这会让辅助技术完全忽略，违反 WCAG

真正难的是平衡合规要求和用户体验，而不是怎么写那几行 HTML。