如何自定义<input type =“file”>？

Question

如何自定义<input type =“file”>？是否有可能改变外观<input type="file">？

Answer 1

您无法对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事件，然后读取浏览器提供给您的路径（出于安全原因，它可以骗你约的确切路径）。为最终用户提供漂亮的方法是简单地使用返回的路径的基本名称（因此用户只需查看所选的文件名）。

Answer 2

  <label for="fusk">dsfdsfsd</label>
  <input id="fusk" type="file" name="photo" style="display: none;">

为什么不？^ _ ^

请参阅此处的示例