直接给 input[type="file"] 加 CSS 无效是因为浏览器严格限制其样式，background、border-radius 等属性被忽略；安全隐藏需用 position: absolute; left: -9999px 保持可交互性，并通过 label 或 click() 触发。
为什么直接给 input[type="file"] 加 CSS 没用
浏览器对 input[type="file"] 的样式控制极严，background、border-radius、font-size 等绝大多数 CSS 属性会被忽略。写了 input[type="file"] { background: #007bff; } 却毫无变化，不是你写错了，是浏览器根本不认。
强行加 display: none 或 visibility: hidden 会导致 Safari 和部分 Android WebView 中 .click() 失效——点击自定义按钮后，文件选择框根本弹不出来，控制台还静默无报错。
常见错误还包括：label[for="xxx"] 绑定后又给 label 加了 pointer-events: none，结果点击穿透失败；或者用 opacity: 0 隐藏但没配 pointer-events: auto，在 iOS 或开启辅助功能的设备上直接拒触发。
怎么安全隐藏并透传点击
最稳妥的做法是：让 input[type="file"] 保持可交互状态，仅视觉上不可见。
立即学习“前端免费学习笔记（深入）”；
- 用
position: absolute; left: -9999px;把它移出视口——兼容性好，iOS 17+ 也稳定 - 用
label元素绑定（for="id"），或用 JS 触发input.click()，二者都可靠 - 避免用
opacity: 0+top/left覆盖的方式，除非你显式声明pointer-events: auto且严格对齐尺寸 - 不要给
input设tabindex="-1"后再调.focus()——这不是必须项，反而可能干扰 iOS 唤起逻辑
自定义按钮结构与事件绑定要点
结构自由，但交互链不能断。核心是「可见元素 → 触发 → 原生 input → 弹窗」。
推荐 HTML 结构：
<label class="upload-btn" for="file-input">? 上传文件</label> <input type="file" id="file-input" accept=".pdf,.docx" multiple style="position: absolute; left: -9999px;">
如果要用 JS 手动触发（比如动态生成的按钮）：
- 确保
input已挂载 DOM 且未被disabled - 用
button或带role="button"的div，语义正确 - 绑定
click事件（不是touchstart，iOS 会拦截） - 回调里别漏掉
obj.upload(index, file)——auto: false时这步必须手动调
实时显示文件名和移动端适配细节
选中文件后更新文案，靠监听 change 事件即可，但要注意：
-
input.files是FileList，不是数组，用input.files[0]?.name安全取名 - 移动端 Safari 对
click()响应有延迟，不建议在touchend后立刻调，保持原生 click 绑定更稳 - 若按钮是表格行内动态渲染，事件必须委托到父级，否则新节点无监听
- 别在自定义按钮上留默认
:focus样式（如outline），否则点击后视觉跳变明显
真正容易被忽略的是：所有方案都依赖原生 input[type="file"] 的存在和可交互性。删掉它、禁用它、或用 display: none 遮住它，就等于砍掉了触发链的根。样式可以重画，但这个 input 必须活着。
