HTML文件上传字段样式

Question

我想创建一个文件上传字段，它有一点风格，但我似乎有问题找到这个例子。我知道部分原因是该字段本身因浏览器而异。

任何想法如何做到这一点？或者有没有办法做到这一点，而不使用可以样式的表单的文件元素？

Answer 1

如果你的意思是文件名的文本字段，你可以在css文件中使用输入[type = file]选择器。例如：

input[type=file] { background-color: red; } 

如果你的意思是文件选择对话框中，我认为这是浏览器/操作系统依赖和几乎没有（如果有的话），你可以做些什么。

Answer 2

下面是一些链接，我发现：

QuirksMode Article

One Extra Pixel Article (look for the file input styling section)

Answer 3

我想出了这个问题之前。不幸的是，文件上传几乎不可能在不同浏览器上保持一致。从CSS 2开始，我认为W3C标准特别留下了未定义的行为 - 想想在不同平台上需要实现多少种方式。例如，Firefox会在文件上传元素中生成匿名按钮和输入元素，该元素只会继承您在上传元素本身上设置的一些属性。

您可以让一些人使用，例如古野的方法，但知道这种行为将是不稳定的，并且跨平台/浏览器有很大差异。

Answer 4

This将符合您的要求。

Answer 5

如果您正在使用jQuery，来看看这个插件 - https://github.com/ajaxray/bootstrap-file-field

这个小插件会显示文件的输入字段作为引导按钮（带可配置类），并会显示选定的文件名（或选择错误）美丽。

此外，您可以使用简单的数据属性或JS设置来设置各种限制。
e，g，data-file-types="image/jpeg,image/png"将限制选择除jpg和png图像以外的文件类型。