隐藏的file input元素为何能通过label触发文件选择窗口？

这是HTML原生的表单控件关联特性，和Electron无关，核心逻辑如下：

• label元素的本质作用就是关联表单控件，点击label时会自动触发关联控件的click事件——不管这个控件是否可见。当label直接嵌套input元素时，两者会自动建立关联（不需要额外写for和id属性），所以点击label区域就相当于点击了里面的file input。
• display: none只是让file input视觉上隐藏，但它依然存在于DOM中，完全保留了原生file input的所有功能。当label触发它的click事件后，浏览器会正常执行file input的默认行为：弹出文件选择窗口。
• 这种写法是前端开发中自定义文件选择按钮的常用技巧：原生file input的样式很难修改，把它隐藏后用label做自定义UI，既能保留原生的文件选择、文件获取等功能，又能自由设计按钮的外观。

举个完整的示例：

<!-- HTML -->
<label class="custom-file-picker">
  点击选择文件
  <input type="file" class="hidden" />
</label>

<style>
/* CSS */
.hidden {
  display: none;
}
.custom-file-picker {
  padding: 10px 20px;
  background-color: #0078d4;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.custom-file-picker:hover {
  background-color: #005a9e;
}
</style>

<script>
// JS
document.querySelector('input[type="file"]').addEventListener('change', (e) => {
  const selectedFile = e.target.files[0];
  if (selectedFile) {
    console.log('选中的文件名:', selectedFile.name);
    // 后续处理文件逻辑
  }
});
</script>

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