Web应用中能否用JavaScript自定义「打开文件」对话框样式？

直接自定义浏览器原生的「打开文件」对话框（即弹出的系统级文件选择窗口）是不可行的。这个对话框属于操作系统和浏览器的系统级组件，不受网页的CSS/JS控制——浏览器出于安全和交互一致性的考虑，不允许网页修改这类系统弹窗的样式（比如圆角、背景色等）。

不过你可以换个思路：隐藏原生的<input type="file">元素，自己实现一个完全自定义样式的按钮，然后通过JS触发原生输入的选择行为。用户看到的是你自定义的按钮，点击后依然会弹出原生的文件选择对话框，既满足样式需求，又不影响功能。

实现示例 #

<!-- 自定义按钮 + 隐藏的原生文件输入 -->
<div class="custom-file-btn">
  <button>选择文件</button>
  <input type="file" id="fileInput" style="display: none;">
</div>

<style>
/* 自定义按钮样式 */
.custom-file-btn button {
  background-color: #165DFF;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

.custom-file-btn button:hover {
  background-color: #0F4CD0;
}
</style>

<script>
// 绑定点击事件，触发原生文件输入
const customBtn = document.querySelector('.custom-file-btn button');
const fileInput = document.getElementById('fileInput');

customBtn.addEventListener('click', () => {
  fileInput.click();
});

// 处理文件选择后的逻辑
fileInput.addEventListener('change', (e) => {
  const selectedFile = e.target.files[0];
  if (selectedFile) {
    console.log('选中的文件:', selectedFile.name);
    // 这里可以添加你的业务逻辑
  }
});
</script>

这个方案的核心是：用自定义UI替代原生输入的视觉表现，实际触发和文件处理逻辑还是依赖原生的<input type="file">，既规避了浏览器的限制，又能实现你想要的样式效果。

内容的提问来源于stack exchange，提问作者JZILLA777