您可以对input[type=file]控件本身进行大量修改。

由于单击label与输入正确配对的元素将激活/聚焦它，我们可以使用 alabel来触发操作系统浏览对话框。

这是您可以做到的方法-

label {

   cursor: pointer;

   /* Style as you please, it will become the visible UI component. */

}



#upload-photo {

   opacity: 0;

   position: absolute;

   z-index: -1;

}


<label for="upload-photo">Browse...</label>

<input type="file" name="photo" id="upload-photo" />

表单控件的 CSS 将使它看起来不可见并且不占用文档布局中的空间，但仍将 存在 ，因此可以通过label.

如果您想在选择后显示用户选择的路径，您可以change使用 JavaScript 监听事件，然后读取浏览器为您提供的路径（出于安全原因，它可能会向您
谎报 确切的路径）。使最终用户看起来更漂亮的一种方法是简单地使用返回的路径的基本名称（因此用户只需看到选择的文件名）。

Tympanos有一个很棒的指南来设计这个。