直接给 input[type="file"] 加 css 样式基本无效，因浏览器强制限制其渲染；需用“隐藏原生 input+label 绑定+透传交互”方案实现美化，同时注意 filelist 只读性、移动端兼容及 dom 同步等细节。
为什么直接给 input[type="file"] 加 CSS 样式基本无效
因为浏览器对 input[type="file"] 的渲染控制极强，background、border-radius、font-size 等绝大多数 CSS 属性会被忽略。你写 input[type="file"] { background: red; }，页面上根本看不到变化——这不是你的 CSS 写错了，是浏览器故意不让你动它。
更麻烦的是，强行用 display: none 或 visibility: hidden 隐藏它，会导致 Safari 和部分 Android WebView 中 .click() 失效，表单提交时 files 为空；用 pointer-events: none 覆盖在 label 上，又容易点不中或穿透失败。
所以必须绕开直接样式化这条路，靠“隐藏 + 绑定 + 透传”来实现可控的美化。
用 label 绑定 + position: absolute 隐藏是最稳方案
核心是让原生 input 保持可交互（不能 display: none），同时视觉上消失，再把点击行为交给 label 承担。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
input[type="file"]设置position: absolute; left: -9999px;—— 安全、iOS 兼容性好，不会影响 tab 键导航，也不会触发点击失效 -
label用for="xxx"显式绑定input的id，或直接包裹input（推荐后者，语义更清晰） -
label可自由加 class、hover、transition、背景图、SVG 图标，完全不受限制 - 别忘了加
cursor: pointer和 focus outline（比如outline: 1px dotted #000），保证键盘可访问性
监听 change 事件显示文件名要避开常见坑
用户选完文件后，想在按钮上显示文件名？别直接读 e.target.files[0].name 就完事——e.target.files 是 FileList 对象，不是数组，不支持 .map()、... 展开等操作。
- 单文件场景：用
e.target.files[0]?.name || '未选择文件'，避免undefined报错 - 多文件场景：别拼接全部名字（20 个文件名会撑爆 UI），改用
${e.target.files.length} 个文件 - 别在
change里反复调用input.click()—— 这会导致 iOS Safari 弹窗被拦截，且用户无法取消选择 - 如果用了
multiple和accept同时设置，在 iOS 17+ 有已知触发失败案例，建议分开测试
自定义按钮里嵌入删除功能时要注意 DOM 同步
当支持多文件且允许逐个删除时，光靠 JS 删除 FileList 里的项是没用的——FileList 是只读对象，删了也不影响实际上传内容。
- 真正要删，得清空
input的value（设为''），再重新触发一次change模拟“重选”，否则表单提交还是带着旧文件 - 如果用
label里放多个span显示每个文件名，记得每次更新都同步清理 DOM 节点，避免重复追加 - 移动端点击删除图标后，焦点容易丢失，建议手动
input.focus()保持可操作流
最麻烦的不是怎么写，而是不同系统对 input[type="file"] 的底层处理差异太大——iOS Safari、Android WebView、旧版 Edge 各有一套逻辑，所有“看起来能跑”的方案，都得在真机上挨个点一遍才能信。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
