::file-selector-button仅作用于input[type="file"]原生按钮，必须用标签/id/属性选择器精确命中，支持color、background、padding等有限样式，禁用width/height和transform，firefox 115+、safari 16.4+、chrome 120+起支持，需@supports检测并配合label保障可访问性。
::file-selector-button 能用，但只在 Firefox 115+、Safari 16.4+、Chrome 120+ 及以上生效；旧版本浏览器直接忽略整条规则，不会报错也不会降级——你得自己兜底。
为什么 .upload-btn::file-selector-button 一点反应都没有
这不是你的 CSS 写错了，是浏览器压根不认这个写法。::file-selector-button 是伪元素，但它**不参与 class 匹配**，也不继承父级样式。哪怕你给 <input type="file" class="upload-btn"> 加了 class，.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>后再用后代选择器去选——label:hover input::file-selector-button完全无效，伪元素不支持这种穿透 - ⚠️ 检查是否误加了
display: none或visibility: hidden：这两个会让整个伪元素链失效，按钮区域彻底不可点
::file-selector-button 能改什么、不能碰什么
它不是普通按钮，只接受一小撮属性。写错不会报错，而是“看起来改了，其实没变”。
- ✅ 安全可用：
color、background、border、border-radius、padding（这是唯一能“撑大”按钮视觉区域的方式）、font相关、cursor: pointer（必须显式写，否则 hover 没手型） - ❌ 绝对禁用：
width/height（无效，浏览器直接忽略）、transform/filter/box-shadow（Safari/旧版 Chrome 静默丢弃）、position+z-index（Safari 渲染异常高发） - ⚠️
padding是关键：想让按钮看起来更大，只能靠 padding；别用 width/height 强撑，那只是幻觉
怎么让 hover 和 active 真正响应
::file-selector-button 本身不支持独立的 :hover，但 input:hover::file-selector-button 是有效的——前提是鼠标真正在 input 的可见区域内。
- 给
input[type="file"]加display: block或inline-flex，否则默认inline行为下padding可能不生效 -
input[type="file"]::file-selector-button:hover在 Chrome/Firefox 中有效；Safari 对热区判定更严，建议用padding扩大可点击区域 - 别指望
label:hover input::file-selector-button—— 后代选择器无法命中伪元素 - 记得加
cursor: pointer，不然用户 hover 时根本看不出这是个按钮
真正麻烦的不是怎么写对，而是怎么让文件名显示、怎么兼容老浏览器、怎么保证屏幕阅读器能识别——这些 ::file-selector-button 一个都不管。它只负责美化那个小按钮，其余全是你要手动补的洞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
