::file-selector-button仅作用于input[type="file"]原生按钮部分，必须用属性/ID/标签+属性选择器精确命中，支持color、background、padding等有限样式，禁用width/height和transform，Firefox 115+及Safari 16.4+起支持，需@supports检测并配合label保障可访问性。
::file-selector-button 不是万能的“按钮替换器”，它只作用于 input[type="file"] 的原生按钮部分，且必须满足三类选择器 + 有限样式 + 浏览器支持才生效。直接写 .my-btn::file-selector-button 肯定没反应——这不是 bug，是规范限制。
为什么 .class::file-selector-button 完全不生效
浏览器根本不认 class 绑定到伪元素上。伪元素 ::file-selector-button 只响应能**精确命中 input 元素本身**的选择器：
-
input[type="file"]::file-selector-button—— 通用但易被其他规则覆盖 -
#uploadBtn::file-selector-button—— 推荐，ID 唯一、优先级高、不易冲突 -
input[data-role="upload"]::file-selector-button—— 自定义属性也行，语义清晰
写成 .file-input::file-selector-button 会被静默忽略，连控制台警告都没有。
::file-selector-button 能改什么、不能碰什么
它只接受一小部分 CSS 属性，改错就等于白写。关键不是“想加什么”，而是“哪些加了才真起效”：
立即学习“前端免费学习笔记（深入）”；
- ✅ 安全可用：
color、background、border、border-radius、padding（唯一能“撑大”按钮视觉区域的方式）、margin、font相关属性 - ❌ 绝对禁用：
width/height（无效，浏览器直接忽略）、transform/filter/box-shadow（Safari/旧版 Chrome 不支持，部分静默丢弃）、position+z-index（Safari 渲染异常高发） - ⚠️ 必须显式写：
cursor: pointer，否则 hover 时无手型，用户感知不到可点击
如何让 hover 和 active 状态真正响应
伪元素本身不支持 :hover 独立触发，但 input:hover::file-selector-button 是有效的——前提是鼠标真正在 input 的可见区域内：
- 给
input[type="file"]设置display: block或inline-flex，否则默认 inline 行为下 padding 等可能不生效 - 避免用
width: 100%强撑，按钮宽度由内容决定；用min-width控制最小尺寸更可靠 -
input[type="file"]::file-selector-button:hover在 Chrome/Firefox 中有效，但 Safari 对hover区域判定更严格，建议搭配padding扩大热区 - 别试图用
label:hover input::file-selector-button—— 后代选择器无法穿透到伪元素
Firefox 和老浏览器怎么兼容
Firefox 115+ 才开始支持 ::file-selector-button，114 及更早版本完全无视；Safari 16.4+ 支持，但部分属性（如 box-shadow）仍不稳定。纯 CSS 降级方案必须存在：
- 用
@supports selector(::file-selector-button)包裹伪元素样式，防止不支持时出错 - 基础结构必须用
<label>包裹input，确保无 JS 时仍可点击 - 隐藏原生 input 的推荐方式：
position: absolute; clip: rect(0 0 0 0);（保留可访问性），而不是display: none或visibility: hidden（会断掉伪元素链） - 自定义按钮样式完全自由，但需通过
label[for="xxx"]关联，或用嵌套结构（<label><input></label>）保证语义和焦点流转
最常被忽略的一点：美化后若移除了原生按钮的 focus-visible 样式或没处理键盘操作，对屏幕阅读器用户就是不可用的——伪元素再好看，也不能牺牲可访问性底线。
