input[type="file"]样式受限是因浏览器强制使用原生控件，CSS仅能作用于极小表层；::file-selector-button是最简原生美化方案，但需Chrome 111+/Firefox 119+/Safari 16.4+支持；兼容旧版须用label包裹并视觉隐藏input（非display:none），文件名显示必须依赖change事件监听与JS动态更新。
为什么直接写 input[type="file"] 样式基本无效
不是你 CSS 写错了，是浏览器根本没打算让你改。Chrome、Firefox、Safari 对 input[type="file"] 的渲染做了强限制：大部分属性（background、padding、border-radius、font-size）要么被忽略，要么只在部分区域生效。比如 Chrome 允许设 border，但设了 background 也看不到——它底层用的是 OS 原生控件，CSS 只能“蹭”到极小的表层。
用 ::file-selector-button 是最简方案，但得看浏览器支持
这是目前唯一能真正“原生美化”而不绕路的 CSS 方式，专为文件按钮设计：
input[type="file"] {
font-size: 0; /* 隐藏后面的文字，如“未选择任何文件” */
}
input[type="file"]::file-selector-button {
background: #007bff;
color: white;
padding: 6px 12px;
border-radius: 4px;
border: none;
cursor: pointer;
}注意几个硬约束：
-
::file-selector-button只匹配按钮区域，不控制后面的文件名文本（所以要配合font-size: 0或额外加span显示） - 它在 Chrome 111+、Edge 111+、Firefox 119+、Safari 16.4+ 才稳定支持；旧版 Safari 完全不识别
- 不能用
display: none或visibility: hidden隐藏整个 input，否则伪元素也会消失 - 移动端 iOS 16.4+ 才开始支持，iOS 16.0–16.3 点击无响应，别在线上环境默认启用
兼容性兜底：必须用 label + 视觉隐藏 input
当你要支持 Chrome 100 以下、老版 Edge 或 iOS 15，就得回归经典方案：用 label 承担点击，把 input “藏起来但保功能”。
立即学习“前端免费学习笔记（深入）”；
关键不是“隐藏”，而是“可访问、可脚本触发、不占位”：
- 别用
display: none—— 屏幕阅读器读不到，input.click()在某些安卓 WebView 失效 - 推荐用
position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; -
label必须通过for属性或嵌套方式与input关联，否则点击不触发 -
label要加cursor: pointer，不然用户看不出它是可点击区域 - 如果用 JS 动态触发（比如拖拽后自动打开选框），必须调用原生
input的click()方法，而不是模拟 label 点击
显示选中文件名必须靠 JS，CSS 做不了
伪元素（::before/::after）没法插入动态文本，input.value 在不同浏览器返回路径或空字符串，完全不可靠。
正确做法是监听 change 事件：
const input = document.querySelector('input[type="file"]');
const label = document.querySelector('label[for="myFile"]');
<p>input.addEventListener('change', e => {
const fileName = e.target.files[0]?.name || '未选择文件';
// 别直接改 label.textContent，会干掉里面的 input
const filenameEl = label.querySelector('.filename');
if (filenameEl) filenameEl.textContent = fileName;
});容易漏的点：
- 用户点开对话框但取消选择，
e.target.files.length为 0，得主动清空显示文本 - 多文件上传时，
files[0]可能不存在，要用可选链?.name - 如果 label 里还塞了图标或其它 DOM，别用
label.innerText = ...，会破坏结构
最麻烦的其实是状态同步：视觉按钮、JS 文件对象、表单提交逻辑、错误提示、重置行为，这四者稍有脱节，用户就会觉得“点了没反应”或“显示名字不对”。别把它当成纯样式问题来解。
