原生 无法用 css 直接样式化是浏览器安全限制所致；需用 opacity: 0 + position: absolute 隐藏并配合 实现自定义外观，通过 change 事件获取真实文件名。

原生 <input type="file"> 无法用 CSS 直接样式化——这不是你写错了，是浏览器故意限制的。所有试图给它加 background、border、font-size 或伪元素（如 ::before）的操作，基本都会失效。

为什么 input[type="file"] 的样式几乎无效？

浏览器把该控件视为高风险 UI 元素：防止页面伪造“选择文件”按钮诱导用户上传恶意内容。因此：

• width/height 在部分浏览器中被忽略（尤其 Safari）
• background、color、padding 多数不生效或仅影响极小区域
• ::before 和 ::after 完全不可用于该元素
• display: none 或 visibility: hidden 会导致点击失效（Safari 尤其明显）
• opacity: 0 + position: absolute 是目前最稳定、无障碍友好的隐藏方式

用 <label></label> 包裹实现完全自定义外观

核心逻辑：视觉层归 <label></label>，交互层仍由原生 <input> 承担。必须保证两者关联正确且可点击区域对齐。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 推荐嵌套写法：<label><input type="file">上传文件</label>，无需 id/for，避免 ID 冲突
• <input> 必须设为 position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;
• <label></label> 可任意加 class、背景、圆角、过渡、图标（用 ::before）、甚至 Bootstrap 按钮类（如 btn btn-primary）
• 别给 <input> 加 pointer-events: none——这会彻底断掉触发

显示已选文件名必须靠 JavaScript 监听 change 事件

原生控件不提供“显示路径”的能力，value 属性返回的是假路径（如 C:\fakepath\abc.jpg），且 IE/Edge 表现不一致。

• 监听 input.addEventListener('change', ...)，而非 click —— 用户可能取消选择，此时 files.length === 0
• 取真实文件名用 input.files[0]?.name，多文件则遍历 input.files
• 若需截断长文件名（如超过 20 字符），建议用 name.slice(0, 17) + '...'，而非依赖 CSS text-overflow（移动端兼容性差）
• 别在 change 里直接改 input.value——多数浏览器会拒绝写入

真正容易被忽略的点是：隐藏 <input> 时，opacity: 0 必须配合 position: absolute 和明确的宽高覆盖；只靠 opacity 不设定位，会导致点击区域偏移或失效——尤其在移动端缩放后。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！