::file-selector-button 仅在现代桌面浏览器有限支持，小程序和多数 webview 完全不识别；uni-app 编译到小程序时 input[type="file"] 被替换为原生 api，dom 不存在故伪元素无效；h5 端在旧版 ios/android webview 中同样失效。
::file-selector-button 在跨端（Web、微信小程序、uni-app、iOS Safari、Android WebView）中根本不能统一使用——它只在现代桌面 Chrome/Firefox/Safari 16.4+ 有限支持，且样式能力极弱；小程序和多数 WebView 完全无视该伪元素。
为什么 ::file-selector-button 在 uni-app 或小程序里完全不生效
uni-app 编译到微信小程序时，input[type="file"] 被替换为原生 chooseImage/chooseFile API 调用，DOM 层面根本不存在 input 元素，自然无法匹配任何伪元素。H5 端若目标平台是 iOS 15.6 或 Android 11 内置 WebView，也大概率不识别该伪类——它们的 Blink/WebKit 版本未启用该特性，@supports (appearance: none) 都可能返回 false。
- 检查方式：在真机 DevTools 中选中
input[type="file"]，展开 Styles 面板，手动输入::file-selector-button规则，看是否被标记为invalid - uni-app H5 模式下若需兼容旧版 Safari，必须禁用
::file-selector-button，改用label + opacity: 0方案 - 小程序端连
input[type="file"]标签都不渲染，直接写 CSS 是无意义的“对空气编程”
::file-selector-button 的有效写法与浏览器支持边界
即使在支持它的浏览器中，选择器也必须精确命中 input 元素本身，且不能依赖 class：
- ✅ 有效：
#uploadBtn::file-selector-button（ID 最稳）、input[data-role="upload"]::file-selector-button、input[type="file"]::file-selector-button - ❌ 无效：
.upload-btn::file-selector-button（class 不参与匹配）、label .upload-btn::file-selector-button（后代选择器穿透失败） - ⚠️ Safari 16.4+ 支持但
box-shadow、transform静默丢弃；Firefox 117+ 才开始支持，115–116 会忽略整条规则
真正跨端可用的文件上传按钮方案
放弃纯 CSS 伪元素幻想，采用结构级降级：
- HTML 结构必须含真实
input[type="file"]，且不可设display: none（否则屏幕阅读器失效），改用position: absolute; opacity: 0; width: 100%; height: 100% - 用
label[for="xxx"]或事件委托（click到input）触发，确保小程序/WebView/H5 行为一致 - 样式完全作用于
label或自定义容器，例如：.custom-upload-btn { background: #007AFF; padding: 12px 24px; border-radius: 6px; } - 如需区分平台，在 uni-app 中用
process.env.UNI_PLATFORM === 'mp-weixin'动态加载不同组件逻辑，而非靠 CSS 适配
最易被忽略的一点：很多开发者以为加了 @supports (::file-selector-button) 就万事大吉，但实际运行时，Safari 可能已支持该伪类却拒绝应用 background（因内部渲染限制），而控制台不报错也不提示——你得真机点按测试热区是否响应，不能只看样式是否“显示出来”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
