您不能对input[type=file]控件本身进行太多修改。

由于单击label与输入正确配对的元素会激活/聚焦它，因此我们可以使用a label触发OS浏览对话框。

这是您可以做到的…

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侦听事件，然后读取浏览器提供给您的路径（出于安全原因，它可能对您 _撒谎_有关确切的路径）。使最终用户满意的一种方法是简单地使用返回路径的基本名称（这样用户便可以看到所选的文件名）。