CSS ::file-selector-button伪元素简介:修改file类型的 input 样式

一、出现的背景

长久以来，file类型的 <input> 文件选择框有个非常诟病的问题，那就是浏览器默认的样式太丑，且无法自定义。

实时效果如下所示：

如果希望兼顾功能与视觉，通常的做法是隐藏文件选择输入框，然后使用 <label> 元素模拟上传按钮，HTML结构示意如下：

更多 请参考

https://www.zhangxinxu.com/wordpress/2022/10/css-file-selector-button/