直接修改 样式行不通，因浏览器规范限制其样式层与渲染层隔离；应通过 label 绑定隐藏的 input（如 opacity: 0）实现自定义外观，并注意 change 事件中用 files.length === 0 判断空文件、移动端点击区域不小于 44×44px 等细节。
为什么直接改 <input type="file"> 样式行不通
浏览器对 <input type="file"> 的样式控制极严——border、padding、background 大部分无效，::before/::after 伪元素不生效，连 font-size 都可能被忽略。这不是 CSS 写得不对，是规范限制：原生控件的渲染层和样式层隔离了。
用 label + for 激活隐藏的 input
核心思路是把原生 <input type="file"> 视觉隐藏（不是 display: none 或 visibility: hidden，那会断开交互），再用 <label></label> 绑定它，点击 label 就触发文件选择。
-
input设为position: absolute; left: -9999px;或width: 1px; height: 1px; opacity: 0;—— 保留可访问性和可聚焦性 -
label写成任意 HTML 结构：<button>上传文件</button>、<div class="upload-btn">+、甚至带 icon 的 flex 容器 <li> <code>label必须有for属性，值等于input的id；或把input包在label里（此时无需for）
监听 change 事件时注意 input.files 的空值判断
用户点取消、没选中任何文件、或清空已选文件后，input.files 是空的 FileList 对象（不是 null 或 undefined），直接 if (e.target.files) 会误判为有文件。
input.addEventListener('change', e => {
if (e.target.files.length === 0) return; // ✅ 正确判断
const file = e.target.files[0];
// 后续处理...
});
移动端点击区域小？加 cursor: pointer 和最小尺寸
很多自定义按钮没设 cursor: pointer，用户不知道能点；iOS 上若点击区域小于 44×44px，触控响应可能失败。
- 给自定义按钮加
min-width: 44px; min-height: 44px; - 确保父级
label或包裹容器没有pointer-events: none - 避免用
span直接当按钮——它默认display: inline，宽高设置无效，优先用button或div并设display: inline-block/flex
真正麻烦的是多文件支持、拖拽、预览、进度反馈这些——它们和“换皮”是不同层级的问题，别混在一起搞。
