::file-selector-button仅在type="file"的input直接子元素上生效，需设display:block/inline-flex；不可用display:none或visibility:hidden；firefox 117+才支持；仅支持有限样式属性，appearance:none须作用于input本身而非伪元素；点击区域由input尺寸和定位决定。
Chrome/Firefox里::file-selector-button不生效？先检查基础结构
这个伪元素只在 <input type="file"> 的直接子节点上起作用，且必须配合 display: block 或 inline-flex 等可样式化显示模式。常见错误是套了一层 <label></label> 却没给 input 设透明或隐藏，导致伪元素被“压住”或根本没渲染。
- 确保
input没有设display: none或visibility: hidden—— 这会让整个伪元素链失效 - 如果用
<label for="xxx"></label>触发，input得保留在 DOM 中、可见但视觉隐藏（比如opacity: 0; position: absolute;） - Firefox 117+ 才支持
::file-selector-button，旧版只能靠 JS 模拟按钮行为
::file-selector-button 能改哪些样式？别碰这些属性
它只接受有限的 CSS 属性：颜色类（color、background）、文字类（font、text-align）、尺寸类（padding、border、border-radius），但不支持 transform、filter、box-shadow（部分浏览器会静默忽略）。
-
width/height无效 —— 它的尺寸由内部文本和浏览器默认布局决定，要用padding控制大小 -
cursor: pointer必须显式设置，否则 hover 时可能无手型 - 不要对它用
position: relative后再加z-index，容易在 Safari 中触发渲染异常
怎么让上传按钮看起来像普通按钮？用appearance: none清底
不同浏览器对文件输入的默认样式差异很大，appearance: none 是统一控制的前提。但它在 Safari 中需要 -webkit-appearance: none 前缀，且必须加在 input[type="file"] 上，而不是伪元素上。
- 先写：
input[type="file"] { -webkit-appearance: none; appearance: none; } - 再写：
input[type="file"]::file-selector-button { background: #007bff; color: white; padding: 8px 16px; border-radius: 4px; } - 如果想兼容老 Edge（EdgeHTML），得额外用
input[type="file"]::-webkit-file-upload-button回退
点击区域变小或点不中？input 的尺寸和定位才是关键
用户真正点击的是 input 元素本身，不是伪元素。伪元素只是视觉层，底层 input 如果太小或位置偏移，就会出现“看着能点、实际点不中”的问题。
- 把
input设为position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;，再用父容器撑开尺寸 - 避免用
transform: scale()缩放整个input—— 点击坐标不会同步缩放，Safari 尤其明显 - 移动端要注意
min-height: 44px，否则 iOS 可能触发 zoom 或误触
input 自身的尺寸、定位、透明度，才是决定体验是否正常的核心。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
