直接写 .my-input::file-selector-button 无效，因 ::file-selector-button 是伪元素，不参与 class 匹配；必须用 input[type="file"]、ID 或属性选择器精确命中 input 元素本身。
为什么直接写 .my-input::file-selector-button 没效果
因为 ::file-selector-button 是伪元素，不参与 class 选择器匹配。浏览器只认能**精确命中 input 元素本身**的选择器：属性、ID 或标签+属性组合。写 .file-btn::file-selector-button 会被静默忽略，连报错都没有。
真正有效的写法只有这三类：
-
input[type="file"]::file-selector-button（通用但易被覆盖） -
#uploadBtn::file-selector-button（推荐，ID 唯一且优先级高） -
input[data-role="upload"]::file-selector-button（用自定义属性也行）
别给 input 加 display: none 或 visibility: hidden——那样整个伪元素链就断了，按钮区域彻底不可点。
::file-selector-button 能改什么、不能碰什么
它只接受有限样式属性，不是所有 CSS 都能生效。改错属性会导致样式静默失效，你以为写了，其实没渲染。
立即学习“前端免费学习笔记（深入）”；
✅ 可安全使用的：
- 颜色类：
color、background、border、border-radius - 文字类：
font、font-size、text-align - 尺寸类：
padding（唯一能“撑大”按钮的方式）、margin - 交互类：
cursor: pointer（必须显式写，否则 hover 没手型）
❌ 绝对禁用的：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
width/height（无效，浏览器忽略） -
transform、filter、box-shadow（Safari/旧版 Chrome 不支持，部分静默丢弃） -
position+z-index（Safari 渲染异常高发区）
怎么让按钮响应 hover 和 active 状态
::file-selector-button:hover 在 Chrome/Firefox 中是有效的，但前提是鼠标真正在按钮可见区域内——而这个“可见区域”由 input 自身的尺寸和定位决定，不是伪元素画出来的。
所以更稳的做法是：
- 确保
input[type="file"]有足够大的点击热区（比如设font-size: 16px、padding: 8px） - 用
input:hover::file-selector-button控制悬停态（比伪元素自身 hover 更可靠） - 如果要用 label 包裹，必须让 input 保留在 DOM 中、视觉隐藏但可聚焦（
opacity: 0; position: absolute;），再通过label:hover配合 JS 切换 class 来联动样式
别写 label:hover input::file-selector-button——伪元素不能被后代选择器从外部触发，这条规则永远不生效。
兼容性与移动端绕不开的坑
Firefox 117+、Chrome 111+、Edge 111+、Safari 16.4+ 才稳定支持 ::file-selector-button。旧版 Safari 完全不识别，Firefox 116 及更早版本也得降级。
移动端尤其要注意两点：
- input 尺寸太小或用
transform: scale()缩放后，点击坐标不会同步缩放，iOS 上极易点不中 - 别依赖
appearance: none单独清底——Safari 必须加-webkit-appearance: none，且要作用在input[type="file"]上，不是伪元素上 - 隐藏后面“未选择任何文件”文字？用
input[type="file"] { font-size: 0; }，别试图用伪元素覆盖
最常漏掉的是：伪元素样式生效 ≠ 点击区域同步更新。input 自身的尺寸、定位、透明度，才是决定体验是否正常的核心。
