原生 file input 的按钮文字和提示语无法通过 html/css 修改，因浏览器硬编码且无标准控制属性；accept 仅过滤文件类型，placeholder 无效，value 不可写入；可靠方案是 label 包裹隐藏 input 并用 js 控制文案与状态。
原生 <input type="file"> 的“Choose File”按钮文字和“No file chosen”提示语**无法通过 HTML 或 CSS 直接修改**——这是浏览器硬编码的 UI，各厂商实现不同（Chrome 显示英文，部分国产浏览器可能显示中文但也不可配置），且没有标准属性暴露控制权。
为什么不能直接改 accept 或 placeholder？
accept 只影响文件选择器弹窗的过滤范围，不改变按钮文案；placeholder 对 input[type="file"] 完全无效（规范未定义该行为）。试图设置 value 会触发安全限制（浏览器禁止脚本写入该属性），控制台报错 Failed to set the 'value' property on 'HTMLInputElement'。
真正能生效的方案：用 label + 隐藏 input
核心思路是视觉上“替换”，而非“修改”——保留原生 input 的功能与可访问性，用 label 包裹自定义内容并关联触发：
- 给
input加id="myFileInput"，再用<label for="myFileInput"></label>包裹你想要的文案（如“上传合同 PDF”）或按钮元素 - 用 CSS 彻底隐藏
input：position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;（比display: none或opacity: 0更可靠，保障屏幕阅读器识别） - 在
label内部放一个<span></span>或<button></button>，其文本就是你要的按钮文案；再加一个独立区域（如<span class="file-name"></span>）动态显示选中文件名 - 监听
input的change事件，更新.file-name的textContent，例如：el.target.files?.[0]?.name || "未选择文件"
容易踩的坑：悬停提示、键盘支持、移动端适配
用户鼠标悬停在自定义按钮上时，默认不会显示原生的“Click to choose files”提示——你需要手动补上 title="点击选择文件"；否则屏幕阅读器和键盘用户（Tab 到按钮后按空格/回车）可能不知其作用。另外，iOS Safari 对 label 触发 input[type="file"] 支持不稳定，建议额外绑定 label.onclick = () => input.click() 确保兼容。
真正麻烦的是，这个方案里“未选文件时的提示文案”（比如“请上传 JPG 格式证件照”）必须由你完全控制——它不在 DOM 中自动出现，得靠 JS 判断 input.files.length === 0 后主动渲染到对应容器里，且要记得在用户取消选择或清空时同步更新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
