html - 如何自定义<输入类型="file">？

Question

是否可以更改 <input type="file"> 的外观？ ？

Answer 1

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

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

这里是你如何做到的......

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 将使它看起来不可见并且不占用文档布局中的空间，但仍然存在因此可以通过标签激活它.

如果您想在选择后显示用户选择的路径，您可以使用 JavaScript 监听 change 事件，然后读取浏览器为您提供的路径(出于安全原因，它可以 < em>对你说谎关于确切的路径)。一种使它对最终用户来说更漂亮的方法是简单地使用返回路径的基本名称(这样用户只会看到所选的文件名)。

有一个great guide by Tympanus用于样式化。