使用::file-selector-button伪元素可直接替换文件输入按钮样式，兼容Chrome 97+等主流浏览器，无需JavaScript；需结合label语义化结构、@supports检测及无障碍优化确保兼容性与可访问性。
直接用 ::file-selector-button 伪元素就能替换默认的“选择文件”按钮样式，这是目前最标准、兼容性良好（Chrome 97+、Edge 97+、Firefox 115+、Safari 16.4+）且无需 JS 的方案。
基础用法：替换按钮外观
原生 有两个可样式化部分：按钮（::file-selector-button）和后面显示文件名的区域（::file-selector-button + span 或直接选中 input 后的兄弟元素）。先确保 HTML 结构合理：
然后用 CSS 控制按钮：
立即学习“前端免费学习笔记（深入）”；
.file-input::file-selector-button {
background: #007bff;
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}
.file-input::file-selector-button:hover {
background: #0056b3;
}
隐藏原生按钮，自定义整个区域
如果想完全摆脱默认样式，常见做法是把原生按钮透明化并覆盖在自定义按钮上，或用 display: none 配合 label[for] 关联。但更干净的方式是只隐藏按钮部分，保留文件名显示：
- 给
::file-selector-button设opacity: 0或width: 0; height: 0; overflow: hidden，再用position: absolute覆盖自定义按钮 - 保持
input在 label 内，点击 label 仍能触发选择（语义好、无障碍友好） - 文件名可通过
.file-input + span或 JS 动态更新（如监听change事件）
注意兼容性和降级处理
不是所有浏览器都支持 ::file-selector-button（比如旧版 Safari 或 IE）。稳妥做法是：
- 先写通用样式（如 label 的整体样式），确保无 JS 时也能用
- 用
@supports包裹伪元素样式，避免不支持时出错 - 例如：@supports selector(::file-selector-button) { .file-input::file-selector-button { … } }
别忘了可访问性
美化后容易忽略屏幕阅读器体验：
- 确保
input有id，且label正确关联（for或包裹） - 避免仅靠颜色传达状态（如“上传成功”要用文字+图标+颜色）
- 按钮要有明确焦点样式（
:focus-visible）
基本上就这些。用 ::file-selector-button 是目前最轻量、语义清晰的美化方式，不用 JS、不破坏原生行为，关键细节理清了就不复杂但容易忽略。
