HTML文件上传字段样式

时间:2010-02-16 20:13:54

标签: html file upload coding-style

我正在尝试创建一个具有一点风格的文件上传字段,但我似乎在查找此示例时遇到问题。我知道部分原因是该字段本身因浏览器而异。

任何想法如何做到这一点?或者有没有办法在不使用可以设置样式的表单的文件元素的情况下执行此操作?

5 个答案:

答案 0 :(得分:4)

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

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

如果您的意思是文件选择对话框,我认为它依赖于浏览器/操作系统,并且您可以做很少(如果有的话)。

答案 1 :(得分:3)

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

可以让一些人使用,例如,Furuno的方法,但要知道这种行为将是不稳定的,并且在不同平台/浏览器之间存在很大差异。

答案 2 :(得分:2)

答案 3 :(得分:0)

This符合您的要求。

答案 4 :(得分:0)

如果您使用的是jQuery,请查看此插件 - https://github.com/ajaxray/bootstrap-file-field

这个小插件将显示文件输入字段作为引导按钮(具有可配置的类),并将精美地显示所选的文件名(或选择错误)。

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