::file-selector-button仅支持精确选择器（如input[type="file"]、ID或属性选择器），不响应class；仅允许color、background、padding等有限样式，禁用width/height和transform；旧版Firefox及Safari需降级为label包裹+clip隐藏方案。
::file-selector-button 能直接美化按钮区域，但只在 Chrome 111+、Edge 111+、Firefox 119+、Safari 16.4+ 有效；Firefox 117 之前和旧 Safari 完全不支持，必须降级用 label 包裹 + 隐藏 input 的方案。
为什么 .my-btn::file-selector-button 样式不生效
这个伪元素不参与 class 选择器匹配，浏览器会静默忽略所有带 class 的写法。它只响应能**精确命中 input 元素本身**的选择器：
-
input[type="file"]::file-selector-button（通用，但易被其他规则覆盖） -
#uploadBtn::file-selector-button（推荐，ID 唯一且优先级高） -
input[data-role="upload"]::file-selector-button（用自定义属性也行）
写成 .file-input::file-selector-button 或 label .file-input::file-selector-button 都无效，连控制台错误都不会报。
哪些 CSS 属性能用、哪些会静默失效
它不是普通元素，只接受有限样式属性。写错不会报错，而是“看起来没变”：
立即学习“前端免费学习笔记（深入）”；
- ✅ 安全可用：
color、background、border、border-radius、padding（唯一能“撑大”按钮的方式）、font相关、cursor: pointer（必须显式写，否则 hover 没手型） - ❌ 绝对禁用：
width/height（无效）、transform、filter、box-shadow（Safari/旧版 Chrome 静默丢弃）、position+z-index（Safari 渲染异常高发）
想让按钮变宽？别碰 width，用 padding 控制；想加圆角？border-radius 可用，但别配 overflow: hidden——伪元素不响应这个。
如何兼容 Firefox 和老版 Safari
Firefox 117 及更早版本完全无视 ::file-selector-button，必须降级。最稳的方案是隐藏原生 input，用 label 承担视觉和交互：
- 给
input[type="file"]加position: absolute; clip: rect(0 0 0 0);（比opacity: 0或visibility: hidden更可访问） - 用
<label><input type="file">上传文件</label>嵌套结构，或<input id="x"><label for="x">上传文件</label> - 自定义按钮样式完全自由，不受伪元素限制；但需用 JS 监听
change事件读取e.target.files[0]?.name显示文件名
注意：不要只靠 display: none 隐藏 input，那会让屏幕阅读器无法识别控件；clip 方案保留语义和焦点能力。
点击区域小或点不中？问题不在伪元素，在 input 本身
用户真正点击的是 input 元素，不是伪元素画出来的视觉层。伪元素只是“贴图”，底层 input 如果尺寸小、位置偏移或被遮挡，就会出现“看着能点、实际点不中”：
- 确保
input有足够尺寸：设display: block或inline-flex，再用width/height或min-width控制 - 若用绝对定位覆盖在自定义按钮上，要保证
input的top/left/width/height与视觉按钮完全重合 -
::file-selector-button:hover在 Chrome/Firefox 中有效，但前提是鼠标真正在input的可见区域内——这个区域由input自身决定，不是伪元素渲染出来的
最容易被忽略的一点：所有样式生效的前提是 input[type="file"] 本身不能被 display: none 或 visibility: hidden 干掉，否则整个伪元素链就断了，按钮彻底不可点。
