::file-selector-button只匹配input[type="file"]本身，不支持class等中间选择器；仅允许color、background等有限样式；hover需用input:hover::file-selector-button；旧浏览器需opacity:0隐藏input并用label包裹兼容。
为什么.my-btn::file-selector-button完全不生效
浏览器压根不解析 class 选择器绑定到 ::file-selector-button ——这不是 bug，是规范强制要求。它只响应能**精确命中 input[type="file"] 元素本身**的选择器，class 是无效的中间层。
必须用这三类写法之一：
-
input[type="file"]::file-selector-button（通用，但易被其他规则覆盖） -
#uploadBtn::file-selector-button（推荐，ID 唯一、优先级高、无冲突） -
input[data-role="upload"]::file-selector-button（语义清晰，适合组件化）
写成 .file-input::file-selector-button 或 label .btn::file-selector-button，浏览器静默忽略，控制台零提示。
::file-selector-button能改哪些样式、哪些绝对别碰
它不是普通元素，只接受极小范围的 CSS 属性。写错不会报错，而是直接失效——你看到的“没变”，其实是浏览器扔掉了那行声明。
立即学习“前端免费学习笔记（深入）”；
✅ 安全可用：
-
color、background、border、border-radius -
padding（唯一能视觉上“撑大”按钮的方式；width/height无效） -
font-size、font-family、text-align（居中文字靠它） -
cursor: pointer（必须显式写，否则 hover 没手型）
❌ 绝对禁用：
-
width/height（浏览器忽略，按钮尺寸由内容决定） -
transform、filter、box-shadow（Safari/旧版 Chrome 静默丢弃） -
position+z-index（Safari 渲染异常高发）
如何让 hover 和 active 真正起作用
::file-selector-button 本身不支持独立伪类，但 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 对热区判定更严，建议靠padding扩大可点击区域 - 别写
label:hover input::file-selector-button—— 后代选择器无法穿透到伪元素
Firefox 117+ 和 Safari 16.4+ 之外怎么兼容
::file-selector-button 在 Firefox 117 之前、Safari 16.4 之前完全不支持。纯 CSS 方案必须降级，且不能牺牲可访问性。
✅ 推荐结构（兼顾现代与兼容）：
<input type="file" id="fileInput" style="position: absolute; opacity: 0; top: 0; left: 0; width: 100%; height: 100%;"> <label for="fileInput" class="custom-upload-btn">上传文件</label>
⚠️ 关键点：
-
input不能用display: none或visibility: hidden，否则屏幕阅读器无法识别 - 用
opacity: 0+position: absolute是安全底线 - 搭配
@supports selector(::file-selector-button)做特性检测，仅对支持浏览器启用新样式
真正容易被忽略的是：哪怕你写了完美的 ::file-selector-button 样式，只要父级 input 被设了 font-size: 0（用来隐藏“未选择任何文件”文字），就可能连带影响按钮内文字渲染——这个副作用在 Safari 上尤其明显。
