::file-selector-button仅支持有限css属性：✅color、background、border、border-radius、padding（唯一撑大方式）、font类、margin、cursor:pointer；❌width/height、transform、filter、box-shadow、position+z-index、display、appearance均无效或引发异常。
哪些CSS属性在::file-selector-button上真正生效
只有极少数 CSS 属性能被浏览器识别并应用到 ::file-selector-button 上。写错属性不会报错，而是静默失效——你改了，但用户根本看不到变化。
✅ 安全可用的属性（Chrome 111+、Edge 111+、Firefox 119+、Safari 16.4+ 均支持）：
-
color、background、background-color、border、border-radius -
padding（唯一能“撑开”按钮视觉尺寸的方式；width/height完全无效） -
font、font-size、font-weight、text-align -
margin（影响伪元素外边距，但不改变点击区域） -
cursor: pointer（必须显式声明，否则 hover 时无手型）
哪些属性写了也白写，甚至引发渲染异常
很多常用样式在 ::file-selector-button 上是被规范明确禁止或浏览器主动忽略的。尤其要注意 Safari 的兼容性陷阱。
-
width/height：完全无效，按钮尺寸由内部文本和 UA 默认布局决定 -
transform、filter、box-shadow：Safari 和旧版 Chrome 静默丢弃，不报错也不渲染 -
position+z-index：Safari 渲染异常高发，可能导致按钮消失或错位 -
display：只接受inline（默认），设为block或flex会被忽略 -
appearance：不能加在这里，它必须作用于input[type="file"]本身
为什么padding是唯一可控的“尺寸调节器”
按钮的视觉大小无法靠 width/height 控制，但 padding 可以真实扩大其可点击区域和显示范围——前提是底层 input 元素自身有足够尺寸和定位支撑。
- 如果
input是position: absolute; opacity: 0;，那 padding 放大后仍需父容器提供占位空间 - 若父容器未设置
display: block或显式宽高，padding 可能“撑不开”视觉效果 - Firefox 117+ 才开始支持该伪元素，此前版本直接无视所有
::file-selector-button样式
别忘了input[type="file"]本身的样式约束
::file-selector-button 只控制按钮区域，不控制文件名文本（那是另一个伪元素 ::file-selector-button 后面的匿名文本节点）。要隐藏“未选择任何文件”，得对 input 设置 font-size: 0 或用 overflow: hidden 配合固定宽高裁剪。
-
input[type="file"] { font-size: 0; }是最轻量的隐藏方式 - 千万别用
display: none或visibility: hidden——整个伪元素链会断掉，按钮彻底不可点 - 如需保留无障碍访问，推荐用
position: absolute; clip: rect(0 0 0 0);隐藏而非移除
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
