如何用CSS::file-selector-button美化文件上传按钮？

::file-selector-button 仅在 Firefox 117+ 和 Safari 16.4+ 支持，Chrome/Edge 当前无实现计划；它只响应 input[type="file"]、ID 或 data 属性选择器，不支持 class；仅允许 color、background、padding 等有限样式，禁用 width/height/transform；hover 需用 input:hover::file-selector-button；必须配合 label 降级并用 @supports 检测。

::file-selector-button 只能在部分浏览器生效，不能单独依赖它做跨浏览器美化——Firefox 117+ 和 Safari 16.4+ 才支持，Chrome/Edge 当前（2026年8月）仍无实现计划。

为什么 .upload-btn::file-selector-button 完全不生效

这不是你写错了，是浏览器压根不解析 class 选择器匹配该伪元素。它只响应三类能精确命中 input[type="file"] 元素本身的选择器：

1. input[type="file"]::file-selector-button（通用但易被覆盖）
2. #uploadBtn::file-selector-button（ID 最推荐，优先级高、无歧义）
3. input[data-role="upload"]::file-selector-button（自定义属性语义清晰）

写成 .file-input::file-selector-button 会被静默忽略，控制台零提示，别试。

input[type="file"]::file-selector-button 能改哪些样式

它不是普通元素，只接受有限属性。写错不会报错，而是静默失效——你以为改了，其实没变：

1. ✅ 安全可用：color、background、border、border-radius、padding（唯一能“撑大”按钮视觉区域的方式）、font-family、font-size、cursor: pointer（必须显式写，否则 hover 没手型）
2. ❌ 绝对禁用：width/height（浏览器直接忽略）、transform/filter/box-shadow（Safari/旧版 Chrome 静默丢弃）、position+z-index（Safari 渲染异常高发）

移动端 Safari 对 padding 和 height 解析不稳定，建议用 line-height 控制垂直居中。

如何让 hover 和 active 状态真正响应

::file-selector-button 本身不支持独立 :hover，但 input:hover::file-selector-button 是有效的——前提是鼠标真正在 input 的可见区域内：

1. 给 input[type="file"] 设 display: block 或 inline-flex，否则默认 inline 行为下 padding 可能不生效
2. 避免用 width: 100% 强撑按钮宽度；用 min-width 控制最小尺寸更可靠
3. input[type="file"]::file-selector-button:hover 在 Chrome/Firefox 中有效，但 Safari 对 hover 区域判定更严格，建议搭配 padding 扩大热区
4. 别写 label:hover input::file-selector-button——后代选择器无法穿透到伪元素

另外，display: none 或 visibility: hidden 会让整个伪元素链失效，按钮区域彻底不可点。

必须搭配 @supports 和 label 降级

纯 CSS 方案必须 fallback，因为 Firefox 115 之前版本、所有 IE、以及当前绝大多数 Chrome/Edge 用户都不支持该伪元素。生产环境推荐结构：

<label><input type="file" id="fileInput">上传文件</label>

CSS 中先写通用样式：

1. label { display: inline-block; padding: 6px 12px; background: #007bff; color: white; border-radius: 4px; cursor: pointer; }
2. 再加增强：input[type="file"]::file-selector-button { background: #007bff; color: white; padding: 0 12px; }
3. 隐藏原生文本：input[type="file"] { font-size: 0; }（否则 Chrome 下按钮右侧会挤出“未选择文件”文字）

别忘了用 @supports selector(::file-selector-button) 包裹增强样式，否则老浏览器会把无效规则当错误忽略，导致样式链断裂。