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

Question

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

是否有可能改变外观<input type="file">？

Answer 1

您无法对input[type=file]控件本身进行太多修改。由于单击label与输入正确配对的元素将激活/聚焦它，我们可以使用a&nbsp;label来触发OS浏览对话框。这是你如何做到的......label&nbsp;{ &nbsp;&nbsp;&nbsp;cursor:&nbsp;pointer; &nbsp;&nbsp;&nbsp;/*&nbsp;Style&nbsp;as&nbsp;you&nbsp;please,&nbsp;it&nbsp;will&nbsp;become&nbsp;the&nbsp;visible&nbsp;UI&nbsp;component.&nbsp;*/}#upload-photo&nbsp;{ &nbsp;&nbsp;&nbsp;opacity:&nbsp;0; &nbsp;&nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;&nbsp;z-index:&nbsp;-1;}<label&nbsp;for="upload-photo">Browse...</label><input&nbsp;type="file"&nbsp;name="photo"&nbsp;id="upload-photo"&nbsp;/>表单控件的CSS将使其看起来不可见，并且不占用文档布局中的空间，但仍然存在，因此可以通过它激活它label。如果你想显示选择后用户所选择的道路，你可以监听change使用JavaScript事件，然后读取浏览器提供给您的路径（出于安全原因，它可以骗你约的确切路径）。为最终用户提供漂亮的方法是简单地使用返回的路径的基本名称（因此用户只需查看所选的文件名）。

Answer 2

&nbsp;&nbsp;<label&nbsp;for="fusk">dsfdsfsd</label> &nbsp;&nbsp;<input&nbsp;id="fusk"&nbsp;type="file"&nbsp;name="photo"&nbsp;style="display:&nbsp;none;">为什么不？^ _ ^请参阅此处的示例