在css3中，使用 ::file-selector-button 伪元素可以独立样式化文件上传控件中的按钮部分，而无需替换整个原生控件。通过直接选择该伪元素并应用 background-color、padding、border 等属性，即可实现与页面主题一致的自定义外观，同时保留原生的文件选择交互行为。
如何为文件上传按钮设置基础样式
要为文件上传按钮设置基础样式，只需在CSS中选中 <input type="file"> 元素，然后在其后附加 ::file-selector-button 伪元素选择器，并定义所需的视觉属性。例如，设置背景色、文字颜色、内边距和边框圆角，即可让按钮看起来更现代且符合设计系统规范。这种写法不会影响 <input> 本身的其他部分（如隐藏的文件名显示区域），仅作用于用户可见的“Choose File”或类似文本的按钮区域。
.custom-file-input::file-selector-button {
background-color: #007bff;
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.custom-file-input::file-selector-button:hover {
background-color: #0056b3;
}上述代码将类名为 custom-file-input 的文件输入框的按钮部分设置为蓝色背景、白色文字，并在悬停时变为深蓝色。浏览器会渲染一个带有圆角的矩形按钮，点击后触发系统文件选择对话框。此方法兼容所有支持 ::file-selector-button 的现代浏览器，包括 Chrome 90+、Firefox 90+、Safari 15.4+ 和 Edge 90+。
立即学习“前端免费学习笔记（深入）”；
如何移除默认按钮样式以完全自定义
若希望彻底移除浏览器默认的按钮样式，转而使用完全自定义的元素（如 <button></button>）来触发文件选择，可通过将 ::file-selector-button 的 display 设为 none，并结合 JavaScript 或 CSS 兄弟选择器实现。但更常见的做法是：保留原生控件结构，仅通过 ::file-selector-button 覆盖其样式，从而实现“半自定义”。若需完全脱离原生按钮形态，可将 ::file-selector-button 隐藏，并用一个独立的 <label></label> 或 <button></button> 绑定到 <input type="file">，利用 for 属性或 click() 方法触发选择。此时，原生按钮不可见，自定义元素承担全部UI职责。
<div class="file-upload-wrapper">
<input type="file" id="myFile" class="hidden-file-input">
<button class="custom-trigger-btn" onclick="document.getElementById('myFile').click()">
Select File
</button>
</div>
.hidden-file-input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.custom-trigger-btn {
background-color: #28a745;
color: white;
padding: 10px 20px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
}
.custom-trigger-btn:hover {
background-color: #218838;
}该方案中，原生文件输入框被完全隐藏，用户点击绿色按钮时，JavaScript 调用 click() 方法触发隐藏输入框的文件选择对话框。这种方式允许开发者完全控制按钮的外观和行为，适用于需要高度定制UI的场景。注意，此方法不依赖 ::file-selector-button，而是绕过它，属于替代方案。若仅需样式调整，推荐直接使用 ::file-selector-button；若需功能扩展（如添加图标、动画或多步骤引导），则可采用此隐藏+触发的模式。
当文件被选中后，如何获取所选文件名
当用户通过文件上传控件选择文件后，可通过监听 <input type="file"> 元素的 change 事件，从 files 属性中获取所选文件的列表。每个文件对象包含 name、size、type 等属性，其中 name 即为文件名。例如，在 change 事件回调中访问 event.target.files[0].name 即可得到第一个选中文件的名称。若未选择任何文件，files 长度为0，需做空值判断。此行为与是否使用 ::file-selector-button 无关，因为文件名获取依赖于 <input> 元素本身的状态，而非其按钮部分的样式。
