最稳的隐藏方式是 position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0，因 display: none 或 visibility: hidden 会破坏可访问性和交互。
为什么不能直接给 input[type="file"] 加 background 或 border-radius
因为浏览器对它的样式控制极其有限：Chrome 允许设 border，但 background、padding、height 大部分无效；Safari 和 WebView 几乎完全忽略自定义样式。试图用伪元素（如 ::before）覆盖或强行重绘，会在 iOS 17+、微信内置 WebView 中失交互甚至不触发选择框——这不是兼容性 bug，是浏览器安全策略的主动限制。
最稳的隐藏方式：用 position: absolute; left: -9999px
这是经过长期验证、全平台（包括 iOS Safari 17.6、Android Chrome 128+、微信 8.0.5x WebView）都可靠的隐藏方案。关键点：
-
display: none或visibility: hidden会让input彻底退出可访问性树，label[for]点击失效，.click()在 iOS 静默失败 - 必须加
top: 0（或明确 top 值），否则 Flex 容器中可能偏移导致点击区域错位 - 别用
clip-path: inset(100%)或clip: rect()：iOS 16.4+ 已知会丢失change事件 - 推荐写法：
input[type="file"] { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }
label 关联必须严格匹配，否则 Safari 会忽略
两种合法关联方式，任选其一，但不能混用或漏配：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 嵌套写法（推荐）：
<label><input type="file">上传文件</label>——input必须是label的**直接子元素** - for/id 匹配：
<input type="file" id="myFile">+<label for="myFile">上传文件</label>—— ID 必须唯一且大小写敏感 - label 必须与 input 在同一表单上下文内（同级 DOM 或共同父容器），跨 Shadow DOM 或 iframe 会断开绑定
- 移动端点击 label 后，系统文件选择器唤起延迟约 100–300ms，不要在
touchstart或touchend中调input.click()，保持原生 click 绑定更稳
accept 属性写错等于没写，iOS 尤其严格
iOS Safari 对 accept 的解析是精确字符串匹配，通配写法会被直接忽略：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
accept=".pdf,.docx,.xlsx"或accept="image/jpeg,image/png" - ❌ 无效：
accept="application/pdf"、accept="image/*"、accept="pdf,docx"（漏掉点） - 多文件场景下，
multiple和accept可共存，但若同时用了opacity: 0+ 层叠定位方案，iOS 17+ 有概率触发失败，此时应回退到left: -9999px方案 - 监听
change时，e.target.files是FileList，不是数组：e.target.files[0]?.name才安全；用户取消选择时length === 0，直接取[0].name会报Cannot read property 'name' of undefined
真正难的不是让按钮“看起来漂亮”，而是让隐藏后的 input 在所有设备上仍能被键盘聚焦、被屏幕阅读器识别、被 JS 正确触发——这些细节一旦漏掉，就不是 UI 问题，而是功能不可用。
