最可靠方案是用label包裹input[type="file"]并视觉隐藏，利用点击透传实现自定义外观；必须用position: absolute+opacity: 0隐藏，禁用display: none或visibility: hidden，确保可访问性与JS触发有效。
直接用 <input type="file"> 就能触发系统文件选择框，但原生样式无法修改；想自定义按钮外观，核心不是“设置按钮”，而是“透传点击”——让自定义元素点击后等效于点中 file 输入框。
label 包裹 input 是最稳的写法
不用 JS、无障碍友好、iOS 兼容性好。关键在于结构必须是 <label> 直接包含 <input type="file">，不能靠 for 属性间接关联。
<label class="upload-btn"><input type="file" accept="image/*" multiple>点击上传</label>- CSS 隐藏 input：给
label .upload-btn input加position: absolute; left: -9999px;（别用display: none） - label 内文字或图标可任意样式化，支持 :hover、:focus 等伪类
- 多个上传控件时，每个
<input>独立包裹，无需 id，彻底避开 id 冲突问题
::file-selector-button 只在新浏览器里可用
Chrome 111+、Edge 111+、Safari 16.4+ 支持，Firefox 117+ 才开始支持；老版本 Safari 或 Firefox 会完全忽略该伪元素。
- 必须用精确选择器：
input[type="file"]::file-selector-button或#uploadBtn::file-selector-button，.my-class::file-selector-button无效 - 只接受有限样式：
padding是撑大按钮的唯一方式，width/height无效 - 禁用
transform、box-shadow（Safari 渲染异常）、visibility: hidden或display: none（整个伪元素链失效） - 必须显式加
cursor: pointer，否则 hover 没手型
用 JS 调用 click() 必须满足两个硬条件
浏览器禁止非用户手势上下文调用 input.click()，失败时静默无报错，调试极难定位。
立即学习“前端免费学习笔记（深入）”；
- 调用必须发生在用户真实点击事件的同步回调内，例如：
<button onclick="document.getElementById('file').click()"> -
input必须已挂载到 DOM 且未被disabled；React/Vue 中需确保 ref 已绑定、DOM 节点存在 - 绝对不要在
setTimeout、fetch.then、change回调里调用——哪怕只隔一层函数也不行 - 移动端优先用
click事件，touchend在部分 iOS 场景下响应不稳定
隐藏 file 输入框的安全写法只有这一种
很多写法看似“隐藏了”，实则破坏了可访问性或交互能力，尤其在 VoiceOver、iOS Safari 下会彻底失灵。
- ✅ 推荐：
input[type="file"] { position: absolute; left: -9999px; opacity: 0; width: 1px; height: 1px; } - ❌ 禁止：
display: none（屏幕阅读器不可读、click 失效）、visibility: hidden（同上）、width: 0; height: 0（旧版 Android WebView 点击无效） - ⚠️ 注意：
opacity: 0时若没配pointer-events: auto，某些启用了辅助功能的系统会拒绝激活 - 如果需要键盘支持（如回车触发），确保没加
tabindex="-1"，让 input 保留在焦点流中
真正麻烦的从来不是“怎么让按钮看起来像按钮”，而是“怎么让按钮在所有设备、所有辅助场景下都真能点开文件选择框”。漏掉 pointer-events: auto、误用 display: none、或在异步回调里调 click()，这三处最容易导致上线后用户点不动却查不出原因。
