::file-selector-button 不完全兼容：Safari 16.4+ 和 Firefox 115+ 开始支持，但旧版无视；Firefox 119+/Safari 17.5 仍存在 box-shadow、transform 等样式静默失效；Chrome/Edge 截至2026年8月尚未实现。
不完全兼容。Safari 16.4+ 和 Firefox 115+ 开始支持 ::file-selector-button，但旧版本（如 Safari 15.6、Firefox 114 及更早）全部无视该伪元素；Firefox 119+ 和 Safari 17.5 仍存在 box-shadow、transform 等样式静默失效问题，不能当作稳定样式层使用。
哪些浏览器实际能用 ::file-selector-button
必须按具体版本判断，不是“Safari 支持”或“Firefox 支持”这种笼统说法：
- Safari：仅 16.4+ 支持，且
padding在移动端解析不稳定，line-height比height更可靠 - Firefox：115+ 初始支持，117+ 起较稳定；但 119+ 仍不支持
box-shadow，部分border-radius渲染异常 - Chrome/Edge：截至 2026 年 8 月，**尚未实现**该伪元素（官方状态仍是 “Under consideration”）
- 所有 iOS 15.x 及更早系统自带 Safari、Android WebView（Chrome 80 及以下）、旧版 EdgeHTML —— 全部不识别，CSS 规则被直接跳过
::file-selector-button 的选择器写法有硬限制
它只响应三类能**精确命中 input[type="file"] 元素本身**的选择器，其他一律静默忽略：
- ✅ 推荐：
#upload-btn::file-selector-button（ID 选择器，优先级高、无歧义） - ✅ 可用：
input[type="file"]::file-selector-button（通用，但易被后续规则覆盖） - ✅ 可用：
input[data-role="avatar"]::file-selector-button（自定义属性，语义清晰） - ❌ 无效：
.file-input::file-selector-button（class 选择器被浏览器完全忽略，控制台零提示） - ❌ 无效：
label .file-input::file-selector-button（后代选择器无法穿透到伪元素）
哪些 CSS 属性改了也白改
它只接受极小的属性子集，超出范围的声明会被浏览器直接丢弃，不报错也不生效：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- ✅ 安全可用：
color、background、border、border-radius、padding（唯一能视觉上“撑大”按钮的方式）、font-size、cursor: pointer（必须显式写，否则 hover 无手型） - ❌ 绝对禁用：
width/height（浏览器忽略）、transform/filter（Safari 静默丢弃）、position/z-index（Safari 渲染错位高发） - ⚠️ 注意：
margin在 Safari 中可能影响整体 input 布局，建议只用padding控制按钮内边距
为什么加了 ::file-selector-button 还是原样？
常见原因不是代码写错，而是触发条件没满足：
- 检查
input是否严格为type="file"——type="file" multiple可以，但type="text"或缺省 type 就不匹配 - 确认伪元素写法是双冒号
::file-selector-button，单冒号:file-selector-button是无效语法 - 别在
input主体规则里加!important，它不会继承到伪元素；!important必须放在伪元素内部属性值后，例如：background: #007bff !important; - 避免包裹在
<div><input></div>结构里 —— 伪元素只作用于顶层input元素，嵌套会失效
真正难处理的不是怎么写样式，而是如何让“美化按钮”在 Chrome 看到、Firefox 看到、Safari 也看到——这根本做不到。生产环境必须用 <label><input type="file"></label> + 隐藏原生 input 作为基线方案，::file-selector-button 只能当可选增强层，且必须用 @supports selector(::file-selector-button) 包裹，否则老浏览器会把整段规则当无效 CSS 处理掉。
