如何自定义< input type =" file"&gt ;? [英] How to customize <input type="file">?

问题描述

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

Is it possible to change the appearance of <input type="file">?

推荐答案

您不能修改 input [type = file]

You can't modify much about the input[type=file] control itself.

由于点击与输入正确配对的标签会激活/可以使用标签触发操作系统浏览对话框。

Since clicking a label element correctly paired with an input will activate/focus it, we can use a label to trigger the OS browse dialog.

以下是操作方法...

Here is how you can do it...

<label for="upload-photo">Browse...</label>
<input type="file" name="photo" id="upload-photo" />

CSS

CSS

label {
   cursor: pointer;
   /* Style as you please, it will become the visible UI component. */
}

#upload-photo {
   opacity: 0;
   position: absolute;
   z-index: -1;
}

表单控件的CSS将使其看起来不可见，在文档布局中，但仍然会存在，因此可以通过标签激活。

The CSS for the form control will make it appear invisible and not take up space in the document layout, but will still exist so it can be activated via the label.

如果您想在选择后显示用户选择的路径，可以使用JavaScript监听更改事件，然后读取浏览器为您提供的路径出于安全考虑，您可以向您询问确切的路径）。对于最终用户来说，一种方法是简单地使用返回的路径的基本名称（所以用户只需看到所选择的文件名）。

If you want to display the user's chosen path after selection, you can listen for the change event with JavaScript and then read the path that the browser makes available to you (for security reasons it can lie to you about the exact path). A way to make it pretty for the end user is to simply use the base name of the path that is returned (so the user simply sees the chosen filename).

是一个 Tympanus的精彩指南为样式。

这篇关于如何自定义< input type =" file"&gt ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！