纯HTML+CSS可实现无障碍、打印友好、移动端友好的食材清单页：用语义化关联唯一id的，分组，@media print隐藏未勾选项，扩大点击区域提升触控体验。

用纯 HTML + CSS 实现可勾选的食材清单页

不需要 JavaScript 就能做出带复选框、分类分组、打印友好的食材购物清单页——关键在语义化结构和 的合理使用。

常见错误是直接用

模拟勾选状态，结果无法被屏幕阅读器识别、不能用空格键切换、打印时也不显示勾选状态。正确做法是让每个食材项都包裹在 里，关联原生 input：

鸡蛋（6个）

• id 和 for 必须严格匹配，否则点击文字不会触发勾选
• 不要省略 id —— 没有它，for 就失效
• 避免把整个
• 当作 （HTML5 不允许嵌套交互元素）

按菜系或餐次分组食材，用

+

超市采购常需按“早餐”“炒菜”“汤料”等逻辑分块，

是语义最准确、兼容性最好的方案，比单纯用

或

更可靠：

早餐食材

• 牛奶
• 吐司

• 会自动成为该组的可访问标题，读屏软件能正确播报
• 部分旧版 Safari 对
  的默认边框样式较重，可用 border: none 覆盖，但别删
• 不建议用
  替代——它本质是折叠控件，语义不符，且无法批量操作本组所有复选框

打印时保留勾选状态并隐藏未勾选项（可选）

很多人希望打印前只留下已勾选的条目，或至少让勾选状态清晰可见。纯前端可实现，无需后端：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 勾选状态本身就能被打印（现代浏览器默认保留 input[type=checkbox] 的 checked 状态）
• 如需「只打印已勾选项」，加一段简易 CSS：

  @media print {
    li input:not(:checked) + label,
    li input:not(:checked) {
      display: none;
    }
  }

• 注意：:not(:checked) 在 IE 中不支持，若需兼容 IE，得用 JS 动态增删 class
• 打印预览中测试真实效果，Chrome 和 Edge 的「背景图形」选项默认关闭，会导致复选框勾痕不显示——务必勾选「背景图形」

移动端点按区域太小？用 CSS 扩大可点击范围

手机上手指点 原生控件容易误触，直接放大 input 元素会破坏布局。安全做法是扩大其关联 label 的点击热区：

label {
  padding: 8px 0;
  display: block;
}
input[type="checkbox"] {
  margin-right: 8px;
}

• 不要给 input 设 width/height —— 它会失真，且不同系统渲染差异大
• padding 加在 label 上，既扩大热区又不影响语义结构
• 如果想自定义勾选图标（比如用 ✅ 替代原生方框），必须保留原生 input 并用 position: absolute 隐藏它，再用 ::before 伪元素模拟，否则可访问性全丢

实际部署时最容易被忽略的是：没有为每项设置唯一 id，导致多个同名 for 指向同一个 input，或者漏写 for 让点击失效。这类问题在开发时看不出，到打印或用读屏软件时才暴露。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！