直接用 opacity:0 隐藏 会失效，因为现代浏览器出于防点击劫持的安全限制，当元素 opacity 为 0 且未显式设置 pointer-events: auto 时，部分环境（尤其移动端或辅助功能开启时）会静默拒绝触发文件选择对话框。
为什么直接用 opacity:0 隐藏 <input type="file"> 会失效？
因为现代浏览器（Chrome 90+、Firefox 91+、Safari 15.4+）对 <input type="file"> 的点击区域做了安全限制：当元素的 opacity 为 0 且未设置 pointer-events: none 时，部分浏览器仍会拒绝触发文件选择对话框——尤其在移动端或启用了辅助功能的环境下。这不是 bug，而是防止“点击劫持”的主动防护。
- 只设
opacity:0→ 点击无响应，控制台无报错，行为静默失败 - 加
position: absolute+left: -9999px是更稳妥的隐藏方式 - 若坚持用
opacity:0，必须搭配pointer-events: auto（默认值已足够，但显式声明可避免继承干扰）
怎么让自定义按钮真正触发原生 file input？
核心是「事件委托」：把点击事件绑定到视觉可见的按钮上，再手动调用原生 <input> 的 click() 方法。不能靠 label for 自动触发，因为 opacity:0 元素在某些 UA 下无法被 label 关联激活。
- 确保原生
<input>有id，且不设display:none（否则click()在 Safari 中可能被忽略） - 自定义按钮需用
button或带role="button"的div，避免语义丢失 - JS 中调用前检查
input是否存在于 DOM 且未被禁用：if (input && !input.disabled) input.click(); - 示例片段：
<input type="file" id="file-input" style="opacity:0; position: absolute; top: 0; left: 0; width: 1px; height: 1px;"><button onclick="document.getElementById('file-input').click()">上传文件</button>
移动端点击穿透和 focus 问题怎么处理？
Android Chrome 和 iOS Safari 对 opacity:0 的 <input type="file"> 处理不一致：有时点击自定义按钮后焦点没落到 input 上，导致唤不起系统选择器；有时甚至触发两次选择窗口。
- 给原生
<input>加tabindex="-1"，避免键盘导航意外聚焦 - 在
click()后加input.focus()（虽非必需，但能提升 iOS 可靠性） - 禁止自定义按钮的默认 focus 样式：
button:focus { outline: none; }，否则视觉跳变干扰体验 - 避免在
touchstart事件里调用click()—— iOS 会拦截，改用click或touchend
样式覆盖和无障碍支持容易漏掉什么？
仅靠 opacity:0 隐藏，屏幕阅读器仍会读出该控件，但用户无法感知其存在，也难以操作。这不是纯视觉问题，而是可访问性断裂点。
- 必须保留
aria-label或aria-labelledby，让屏幕阅读器知道按钮用途：<button aria-label="上传头像文件"></button> - 原生
<input>不要加aria-hidden="true"—— 它本身需要被辅助技术识别为文件上传控件 - 不要用
visibility:hidden替代opacity:0，它会让元素脱离可访问树 - 如果项目需支持 keyboard-only 用户，记得监听
Enter和Space键并触发click()
opacity 隐藏法可行，但前提是把交互链补全：视觉层、JS 层、可访问层三者缺一不可。最容易被忽略的是 focus 状态管理和 screen reader 的语义连贯性，而不是样式本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
