设置输入类型=“file”按钮的样式

Question

设置输入类型=“file”按钮的样式如何设置输入的样式type="file"纽扣。

Answer 1

这不需要JavaScript！以下是跨浏览器解决方案：

看这个例子！-在Chrome/FF/IE中工作-(IE10/9/8/7)

最好的方法是有一个带有for属性附加在隐秘文件输入元素(标签是for属性必须与文件元素的id为了让这件事起作用)。

<label for="file-upload" class="custom-file-upload">
    Custom Upload</label><input id="file-upload" type="file"/>

作为另一种选择，您还可以直接用标签包装文件输入元素：(例如)

<label class="custom-file-upload">
    <input type="file"/>
    Custom Upload</label>

在造型方面，只要藏起来¹控件的输入元素。属性选择器.

input[type="file"] {
    display: none;}

那么，您所需要做的就是对自定义进行样式化。label元素。(例如).

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;}

---

¹-值得注意的是，如果您使用display: none，它不会在IE8或更低的地方工作。还要注意jQuery验证这一事实。不验证隐藏字段默认情况下。如果其中任何一件事对您来说都是问题，下面有两种不同的方法来隐藏输入(1, 2在这种情况下起作用。