如何用CSS制作文件上传区域？

直接写 input[type="file"] 样式基本无效，因浏览器规范禁用大部分CSS属性；有效方案是用label包裹并隐藏input，通过label样式控制外观，再用JavaScript监听change事件显示文件名。

为什么直接写 input[type="file"] 样式基本没用

浏览器对 input[type="file"] 做了强限制：大部分 CSS 属性（比如 color、background、padding）在它身上不生效，不是你 selector 写错，是规范层面就禁用了。Chrome、Firefox、Safari 表现一致——原生控件只暴露极少数可样式化接口（如 cursor），其余必须绕开。

真正有效的做法：用 label 包裹 + display: none 隐藏原生 input

核心逻辑是把用户交互“转移”到可样式化的元素上。必须满足两个条件：

1. input[type="file"] 必须是 label 的子元素，或通过 for 属性绑定对应 id
2. input 用 display: none 或 opacity: 0 隐藏（别用 visibility: hidden，它仍占布局空间）
3. label 自己设置宽高、背景、圆角、hover 效果等，点击它就能触发文件选择框

示例结构：

<label class="upload-area"><input type="file" accept="image/*">点击上传图片</label>

CSS 只需作用于 .upload-area，完全可控。

伪元素做“假按钮”时容易踩的坑

很多人想用 label::before 画个图标按钮，但常失败，原因有二：

1. ::before 默认无法响应点击，必须确保 label 本身是可点击区域，伪元素只是装饰层
2. 如果给 label 设了 position: relative，伪元素设 position: absolute，要确认 z-index 不遮挡 input 的触发能力——input 虽不可见，但它的“热区”必须能被穿透点击
3. 移动端 iOS 某些版本对伪元素点击穿透不稳定，建议留出至少 10px 透明 padding 边距，避免纯靠伪元素覆盖触发

显示选中文件名必须用 JavaScript

CSS 无法动态插入文本，所以不能靠伪元素或 content 属性显示文件名。正确路径是：

1. 监听 input[type="file"] 的 change 事件
2. 取 e.target.files[0]?.name（注意空数组情况，用户取消选择时 files.length === 0）
3. 更新一个独立的 <span class="filename"></span> 文本内容，不要直接改 label.textContent，否则会删掉里面的 input

这个步骤漏掉，用户就永远不知道自己点了什么——视觉再漂亮，功能也残缺。