::file-selector-button 在 firefox 128.x、ie 全系、android 4.4 webview、ios 14.5 以下 safari 中被完全忽略，不解析语法；chrome/edge 110+ 和 safari 15.4+ 支持但行为不一；降级必须用 label + 隐藏 input 方案，不可仅依赖 css。
::file-selector-button 在哪些浏览器里根本不管用
Firefox（含最新 128.x）、IE 全系、Android 4.4 WebView、iOS 14.5 以下 Safari —— 这些环境里 ::file-selector-button 会被直接忽略，连语法都不解析。不是“样式不生效”，而是整个规则被丢弃。你写 ::file-selector-button { background: red; }，在 Firefox 里等于没写。
更麻烦的是：@supports (::file-selector-button) 在 Firefox 中永远返回 false，无法用它做可靠的功能检测。别指望靠这个触发降级逻辑。
- Chrome/Edge 110+ 和 Safari 15.4+ 支持，但行为差异大
- IE 和旧 WebView 完全无视该伪元素，且要求
<input type="file">必须在文档流中才响应点击 - 所有降级方案必须基于 DOM 结构切换或 class 控制，不能只靠 CSS
降级方案：隐藏 input + label 模拟的实操要点
这是目前唯一能覆盖 Firefox 和老 IE 的通用路径。核心是把原生 <input type="file"> 视觉隐藏，再用 <label></label> 绑定它来触发选择。
-
<input type="file" id="file-input" class="visually-hidden">，配合<label for="file-input">上传文件</label> -
.visually-hidden推荐用position: absolute; left: -9999px;，比display: none或visibility: hidden更稳妥（后者会禁用交互） - 确保
for属性与id严格匹配，大小写敏感；若用 JS 动态生成，务必同步设置 - 不要依赖
label内嵌input的写法（<label><input>文本</label>），IE8 及以下对这种结构支持不稳定
Safari 和 Chrome 下 ::file-selector-button 的坑
就算浏览器支持 ::file-selector-button，也得绕开几个硬伤：
- Safari 默认
box-sizing: content-box，即使全局设了border-box也不继承 —— 必须显式写::file-selector-button { box-sizing: border-box; }，否则width: 100%+padding会撑出父容器 - Chrome/Edge 字体继承混乱，尤其窄容器下文字易换行或溢出；必须显式声明
font-family: system-ui, -apple-system, sans-serif;，别信inherit - 想隐藏“选择文件”文字只留图标？
font-size: 0在 Safari 会压扁 SVG 图标；改用text-indent: -9999px; overflow: hidden;，再用::before插入内联 SVG
要不要加 -webkit- 前缀？
不用。截至 2026 年 8 月，-webkit-::file-selector-button 不是标准语法，所有主流引擎（包括 Safari）都不识别。加了不仅无效，还会让 CSS 解析器多一次无意义的尝试。
真正要防的，是误以为“写了前缀就稳了”——这玩意儿没前缀标准版，有就是错的。兼容性判断只能靠 JS 特性检测（例如检查 Element.prototype.hasOwnProperty('files') 或创建临时 input 测试伪元素是否可选中），而不是靠猜前缀。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
