::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"] 的原生按钮区域，且必须用 ID、属性选择器或 input[type="file"] 标签选择器直接命中——写成 .my-class::file-selector-button 一定无效。
为什么 .upload-btn::file-selector-button 完全没反应
浏览器根本不会匹配 class 选择器到这个伪元素。它不参与类名继承，也不响应后代/子代选择路径。哪怕你给 input 加了 class="upload-btn"，CSS 写成 .upload-btn::file-selector-button 也会被静默忽略，控制台连警告都没有。
✅ 有效的选择器只有这三类：
-
input[type="file"]::file-selector-button（通用，但易被其他规则覆盖） -
#uploadBtn::file-selector-button（推荐，ID 唯一、优先级高、不易冲突） -
input[data-role="upload"]::file-selector-button（语义清晰，适合组件化）
❌ 别套 label 再去选——label:hover input::file-selector-button 这种写法在所有浏览器里都无效，伪元素不支持跨元素触发。
立即学习“前端免费学习笔记（深入）”；
::file-selector-button 支持哪些样式？哪些写了也白写
它不是普通按钮，只接受极小的 CSS 属性子集。写错不会报错，而是静默失效，你以为改了，其实没变。
✅ 安全可用的属性：
-
color、background、border、border-radius -
padding（唯一能“视觉撑大”按钮的方式；width/height完全无效） -
margin、font相关属性（font-size、font-weight等） -
cursor: pointer（必须显式写，否则 hover 无手型，用户感知不到可点击）
❌ 绝对禁用的属性：
-
width/height（浏览器直接忽略） -
transform/filter/box-shadow（Safari 和旧版 Chrome 不支持，部分会静默丢弃） -
position+z-index（Safari 渲染异常高发，按钮可能消失或不可点）
如何让 hover 和 active 状态真正生效
伪元素本身不支持独立 :hover，但 input:hover::file-selector-button 是合法且有效的——前提是鼠标真正在 input 的可见区域内。
常见失效原因和应对方式：
-
input[type="file"]默认是display: inline，导致padding热区不生效 → 改为display: inline-flex或block - 别用
width: 100%强撑按钮宽度 → 按钮宽度由文字内容决定，用min-width控制最小尺寸更可靠 - Safari 对 hover 区域判定更严格 → 配合足够
padding扩大热区，比如padding: 8px 16px - 避免把
input设为display: none或visibility: hidden→ 整个伪元素链会彻底失效
兼容性与降级必须做 @supports 检测
::file-selector-button 在 Firefox 115+ 和 Safari 16.4+ 才开始支持，Chrome 虽然较早支持，但早期版本对 padding 和 cursor 行为也不稳定。
不能裸写，必须包裹在 @supports 里，并搭配 label 方案作为 fallback：
input[type="file"]::file-selector-button {
/* 基础样式 */
}
@supports selector(::file-selector-button) {
#uploadBtn::file-selector-button {
background: #1E9FFF;
padding: 6px 12px;
cursor: pointer;
}
#uploadBtn {
font-size: 0; /* 隐藏右侧“未选择文件”文字 */
}
}真正容易被忽略的是：即使用了 ::file-selector-button，你也得保留一个可访问的 label 包裹结构——它不只是降级方案，更是屏幕阅读器和键盘用户的必经路径。伪元素改不了“未选择文件”那段文字的语义，也替代不了 for 或嵌套关系带来的可操作性。
