原生 <input type="file"> 的按钮文字和提示文案无法通过 HTML 或 CSS 直接修改，因浏览器硬编码且只读；唯一可靠方案是用带 for 属性的 <label> 触发隐藏的 input，自定义文案写在 label 中。
原生 <input type="file"> 的按钮文字（如 “Choose File”）和提示文案（如 “No file chosen”）**无法通过 HTML 属性或简单 CSS 直接修改**。浏览器硬编码了这些文案，且不同语言环境还会自动本地化。真要改，必须绕过原生渲染逻辑。
为什么不能直接用 value 或 placeholder 改按钮文字
value 对 <input type="file"> 是只读的，设置无效；placeholder 属性根本不被该元素支持。试图写 <input type="file" value="上传文件"> 或加 placeholder，控制台不会报错，但浏览器会静默忽略。
- Chrome / Edge 显示 “Choose File”，Safari 显示 “Select File”，Firefox 显示 “Choose File” —— 文案由 UA stylesheet 决定，不可覆盖
- 即使用了
appearance: none，伪元素::file-selector-button也只控制样式，不控制文案内容 - 所有尝试用 JS 修改
input.value的操作都会被浏览器拦截并重置
用 label + 隐藏 input 实现完全自定义文案
这是目前最稳定、无障碍友好、且被所有现代浏览器支持的做法：用 <label> 触发隐藏的 <input type="file">，把文案写在 <label> 里。
-
<input>必须有唯一id，<label for="xxx">的for值必须与之**逐字符一致**（大小写、连字符都不能错） - 隐藏
<input>要用position: absolute; left: -9999px; opacity: 0;，禁用display: none或visibility: hidden（否则 Safari iOS 和部分 WebView 会失活） - 文案可任意写：
<label for="my-file">点击上传 PDF</label>，未选文件时还能配合useState或data-*属性动态显示 “尚未选择” 或文件名
::file-selector-button 能否改文字？不能，但能改样式
::file-selector-button 是 CSS 伪元素，它**只能修饰按钮区域的外观，不能替换或编辑其中的文字内容**。你最多能用 color、background、padding 控制视觉，但文案本身仍是浏览器内置的。
立即学习“前端免费学习笔记（深入）”；
- 写
.upload-btn::file-selector-button { content: "上传"; }完全无效 ——content不被该伪元素支持 - Firefox 117+ 和 Safari 16.4+ 才支持该伪元素，旧版直接忽略；且
box-shadow、transform等属性在 Safari 中常静默失效 - 如果想“看起来像改了文字”，实际是靠遮罩层 + 绝对定位盖住原生按钮，再用自定义文本模拟 —— 这本质还是 label 方案的变体，不是真改文案
React 中常见误操作与修复点
在 React 项目里，容易因条件渲染或 ref 绑定时机出问题，导致点击无响应或文案不更新。
- 不要在
useEffect里调用inputRef.current.click()—— 浏览器会拒绝非用户手势触发的文件对话框 - 用
ref获取 DOM 节点时，确保组件已挂载且input没被v-if/{condition && <input>}移除 - 监听
change事件后，e.target.files?.[0]?.name是唯一可靠方式获取文件名；重复选同一文件不会再次触发change，需手动清空input.value = ""来重置状态
真正可控的文案，永远来自你写的 <label> 或 JSX 中的字符串变量。别跟原生 input 的文案较劲，把它当一个不可见但功能完备的“触发器”就好 —— 它的唯一职责，就是把用户点击，变成一次合法的文件选择调用。
