唯一可靠方案是用label包裹隐藏的file input并监听change事件获取文件名；需避免display:none导致iOS失效，改用无障碍隐藏，并正确处理files空数组边界。
file input 的“浏览”文字根本不能直接改
浏览器原生 的按钮文字（比如 Chrome 显示“浏览”，Safari 显示“Choose File”）是硬编码在 UA 样式里的，CSS 没有标准属性能覆盖它。你写 button::after 或 input::placeholder 都无效——因为这个文字压根不是伪元素、也不是可编辑文本节点。
用 label + hidden input 是唯一可靠方案
核心思路：把原生 设为 display: none 或 position: absolute; left: -9999px，再用一个普通 关联它（通过 for 属性或包裹结构），点击 label 就触发文件选择框。这样你就能完全控制 label 上的文字和样式。
常见错误现象：
- 只隐藏
input但没加label，导致页面上没可点击区域 -
label的for值和input的id不匹配，点击无效 - 用
visibility: hidden而不是display: none，仍占布局空间且可能被屏幕阅读器误读
实操建议：
- 用包裹式结构最稳妥：
<label> <input type="file" id="myFile" style="display: none"> 我要上传文件 </label>
- 如果必须用
for，确保id和for完全一致：对应 - 给
label加cursor: pointer，避免用户误以为不可点
隐藏 input 后怎么拿到选中的文件名
虽然 input 被隐藏了，但它仍是表单控件，事件和值都正常工作。关键不是“怎么显示文字”，而是“怎么同步状态”。不要试图用 JS 改 input.value（它只读，且设了也没用）。
正确做法是监听 change 事件，读取 files 属性：
document.getElementById('myFile').addEventListener('change', function(e) {
const fileName = e.target.files[0]?.name || '未选择文件';
document.querySelector('.file-name-display').textContent = fileName;
});
容易踩的坑：
- 用
input.value取文件名 → 返回的是路径（如C:\fakepath\abc.pdf），且不同浏览器行为不一 - 没处理
e.target.files.length === 0的情况（比如用户点了取消）→ 导致undefined报错 - 多个文件上传时用了
multiple却只取files[0]，漏掉其余文件
移动端 Safari 的点击穿透问题
iOS Safari 对隐藏的 input[type="file"] 有特殊限制：如果它被 display: none 或 opacity: 0，部分版本会拒绝触发选择框，尤其当 label 是纯文字、没有足够点击热区时。
兼容性对策：
- 不用
display: none，改用position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;（即“无障碍隐藏”） - 确保
label有最小尺寸（比如min-height: 44px），iOS 对小热区敏感 - 避免在
label上同时用pointer-events: none或父级overflow: hidden裁剪，会截断事件流
复杂点在于：你得同时满足视觉控制、可访问性、移动端兼容、文件状态同步——四个条件缺一不可。最容易被忽略的是 iOS 的隐藏方式和 files 的空数组边界处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
