唯一可靠方案是用 position: absolute + left: -9999px 隐藏原生 file input，保持其可访问性与事件响应能力；display: none 或 visibility: hidden 会彻底切断交互与可访问性，尤其在 iOS Safari 和 WebView 中失效。
原生 <input type="file"> 无法真正美化，所有试图直接加 background、border-radius 或覆盖伪元素的方案，在 Safari、iOS WebView 或部分安卓浏览器里都会失效甚至失交互。唯一可靠路径是隐藏它，再用 <label> 冒充按钮。
为什么 display: none 或 visibility: hidden 会彻底失效
这两个声明会让 <input type="file"> 完全退出可访问性树和事件流：屏幕阅读器读不到、label[for] 点击无响应、.click() 在 iOS 和多数 WebView 中静默失败。这不是 bug，是浏览器对文件输入安全模型的强制约束。
- 用
display: none后调用input.click()—— 桌面 Chrome 可能工作，但 iOS Safari 17+ 和微信内置 WebView 必然不触发选择框 -
visibility: hidden同样切断焦点链和键盘可访问性（如 Tab 切入后无法空格/回车触发） - 即使 JS 强行 focus()，也大概率被浏览器拦截并抛出
NotAllowedError
position: absolute + left: -9999px 是最稳的隐藏方式
它让元素仍在 DOM 中、保持可聚焦、支持 label[for] 关联，且不干扰布局。iOS 兼容性经过长期验证，比 opacity: 0 + 层叠方案更鲁棒。
- 必须配合
top: 0或明确 top 值，否则在某些 Flex 容器中可能偏移导致点击失效 - 不要用
clip-path: inset(100%)或clip: rect()—— iOS 16.4+ 已知会导致change事件丢失 -
label必须与input在同一表单上下文内，否则 Safari 可能忽略for绑定
accept 属性写错会导致 iOS 过滤完全失效
iOS Safari 对 accept 的解析极其严格：只认逗号分隔的精确扩展名列表，image/*、video/* 等通配写法会被直接忽略，用户仍能选任意类型文件。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
accept=".jpg,.jpeg,.png,.pdf" - 错误写法：
accept="image/*,application/pdf"（iOS 下等同于没写） - 多文件场景下，
multiple和accept可共存，但若同时用opacity: 0覆盖方案，iOS 17+ 有概率触发失败 —— 此时应退回position: absolute; left: -9999px
监听 change 时别直接读 files[0].name
e.target.files 是 FileList，不是数组，没有 map、filter 等方法；且用户取消选择时 files.length === 0，直接取 [0].name 会报 Cannot read property 'name' of undefined。
- 单文件安全写法：
e.target.files[0]?.name || '未选择文件' - 多文件建议显示数量而非拼接全部名字：
`已选 ${e.target.files.length} 个文件`，避免长文件名撑爆 UI - 不要在
change里直接调用URL.createObjectURL()做预览后忘了revoke—— 内存泄漏在移动端尤其明显
真正的难点不在“怎么让它看起来漂亮”，而在于让漂亮不牺牲可访问性、不丢事件、不跨平台失效。每一步隐藏、绑定、监听，都得同时扛住桌面、iOS、安卓 WebView 三端的差异化行为。稍松一点，就变成“看着美，点不动”。
