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)。