<input type="file">无法直接用CSS改样式，因为浏览器出于安全考虑限制其样式，需通过隐藏原生控件+label或button触发的方案实现自定义外观，并注意跨浏览器兼容性与文件名反馈等细节。
为什么 <input type="file"> 不能直接用 CSS 改样式
因为浏览器对 <input type="file"> 的原生控件做了强限制：大部分 CSS 样式（比如 background、border-radius、padding）在多数浏览器里会被忽略，尤其是按钮文字部分无法单独选中。这不是你写错了，是规范行为——安全机制要求用户明确感知“这是文件上传”，防止伪造点击诱导上传。
用隐藏原生 input + 自定义标签触发的通用方案
核心思路是把原生 <input type="file"> 设为不可见（但保持可访问性），再用一个 <label> 或 <button> 来视觉呈现，并通过 for 属性或包裹关系触发它。
-
<input type="file" id="upload" class="visually-hidden">，配合.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } - 用
<label for="upload">? 选择文件</label>—— 点击 label 会自动聚焦/激活对应 input - 或者用 JS 绑定：
<button onclick="document.getElementById('upload').click()">上传</button>（注意需手动监听change事件获取文件） - 别忘了加
accept（如accept=".pdf,.docx"）和multiple属性，它们在隐藏后依然生效
Chrome/Firefox/Safari 下的样式兼容要点
不同浏览器对 input[type=file] 的伪元素支持差异大，别依赖 ::file-selector-button 做全部样式——它只在 Chrome 112+ 和 Firefox 119+ 支持，Safari 目前（v17.5）仍不支持。
- 如果只面向较新 Chrome，可用：
input[type=file]::file-selector-button { background: #007bff; color: white; padding: 8px 16px; border-radius: 4px; } - 但必须配降级：对不支持的浏览器，上述规则无效，得靠前面的 label 方案兜底
- Safari 中
input[type=file]的文字始终是“Choose File”或本地化字符串，无法用value或placeholder修改，只能靠外层 label 显示自定义文案 - 移动端 iOS Safari 点击区域小，建议 label 设置
display: inline-block; min-height: 44px;防误触
带文件名反馈的实用增强写法
纯按钮没反馈，用户常不确定是否选中。加一行 JS 实时显示文件名，体验提升明显，且不破坏语义。
立即学习“前端免费学习笔记（深入）”；
<input type="file" id="upload" onchange="showFileName(this)">
<label for="upload">? 上传附件</label>
<span id="file-name" style="margin-left: 8px; font-size: 0.9em; color: #666;"></span>
<script>
function showFileName(input) {
const fileName = input.files.length ? input.files[0].name : '';
document.getElementById('file-name').textContent = fileName || '未选择';
}
</script>
注意 input.files 是 FileList，只读，不能赋值模拟；若需清空已选文件，设 input.value = '' 即可。
真正难的是让“已选文件名”在多语言、长文件名、特殊字符下都稳稳显示——别用 title 属性做 tooltip，移动端不触发；也别直接 innerText 插入未转义内容，防 XSS；用 textContent 最安全。
