直接修改 input[type="file"] 样式基本无效，因浏览器严格限制其 css 属性；唯一稳定隐藏方式是 opacity: 0 + position: absolute；推荐用 label 触发，语义正确且无障碍友好。
为什么直接改 input[type="file"] 样式基本无效
浏览器对原生文件输入控件的样式控制做了严格限制：大部分 CSS 属性（width、height、background、border、font-size）会被忽略或部分失效；::before/::after 伪元素完全不生效；display: none 或 visibility: hidden 会导致 click() 失效（尤其 Safari）；transform: scale(0) 或 font-size: 0 可能破坏点击热区。唯一稳定隐藏方式是 opacity: 0 + position: absolute，保持事件可触发。
用 label 触发是最简可靠方案
无需 JS，语义正确，无障碍友好，且与 Bootstrap 按钮类天然兼容：
-
<input id="myFile" type="file">和<label for="myFile" class="btn btn-primary">选择文件</label>必须配对，for值严格等于input的id - CSS 中将
input绝对定位覆盖在label上：top: 0; left: 0; width: 100%; height: 100%; opacity: 0; position: absolute; -
label可直接加class="btn btn-success"等，所有状态（:hover、:focus、:disabled）自动生效 - 避免用
button包裹input—— 会破坏表单提交语义，且某些浏览器不支持嵌套交互
显示已选文件名必须监听 change 事件
原生 input[type="file"] 不提供“显示路径”能力，value 返回的是不可靠的假路径（如 C:\fakepath\abc.jpg），且 IE/Edge 表现不一致：
- 只读
event.target.files[0]?.name，这是唯一标准字段 - 监听
change而非click：用户可能取消选择，此时files.length === 0 - 多文件时需遍历
files列表，注意截断长文件名（如超过 20 字符显示xxx...pdf） - 不要用
input.value更新 UI 文本，它不会随选择实时变化
自定义按钮颜色/渐变要绕过 Bootstrap 的 !important
如果想给触发用的 label（即视觉按钮）加渐变或重定义颜色，不能依赖默认 .btn-primary 类的变量链，因为它是独立元素：
- 给
label添加自定义类（如btn-gradient），避免污染原生类 - 显式设
background-color: transparent !important，再用background-image: linear-gradient(...) - 必须单独定义
.btn-gradient:hover，否则悬停无反馈（Bootstrap 默认 hover 是改background-color，而你已设为transparent） - 边框和文字色需手动匹配，例如加
border: 1px solid rgba(0,123,255,0.3)和color: white
真正麻烦的不是隐藏 input，而是确保点击区域精准对齐、文件名更新时机正确、以及渐变按钮在各种状态下的反馈一致——这些细节一旦错位，用户就会点不到或看不到选中结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
