html - 样式化输入类型 ="file"按钮

Question

如何设置输入 type="file" 按钮的样式？

<input type="file" />

Answer 1

你不需要 JavaScript!这是一个跨浏览器的解决方案:

See this example! - 适用于 Chrome/FF/IE - (IE10/9/8/7)

最好的方法是将带有 for 属性的自定义标签元素附加到 hidden 文件输入元素。 (标签的 for 属性必须与文件元素的 id 相匹配才能使其正常工作)。

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

作为替代方案，您也可以直接用标签包装文件输入元素:(example)

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

在样式方面，只需使用 attribute selector 隐藏¹ 输入元素.

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

然后您需要做的就是设置自定义 label 元素的样式。 (example) .

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

---

¹ - 值得注意的是，如果您使用 display: none 隐藏该元素，它将在 IE8 及以下版本中不起作用。还要注意 jQuery 验证 doesn't validate hidden fields 的事实默认情况下。如果这些事情中的任何一个对你来说是个问题，这里有两种不同的方法来隐藏在这些情况下有效的输入( 1 ， 2 )。