HTML 文件上传字段样式答案

【问题标题】：HTML File upload field styleHTML 文件上传字段样式
【发布时间】：2011-01-17 13:45:57
【问题描述】：

我正在尝试创建一个有点风格的文件上传字段，但我似乎无法找到这样的示例。我知道部分原因是字段本身因浏览器而异。

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

This 符合您的要求。

【讨论】：

【解决方案3】：

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

您可以使用例如古野的方法让一些工作，但要知道该行为会参差不齐并且在不同平台/浏览器之间存在很大差异。

【讨论】：

【解决方案4】：

这是我找到的一些链接：

【讨论】：

【解决方案5】：

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

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

如果您的意思是文件选择对话框，我认为它取决于浏览器/操作系统，您几乎无能为力（如果有的话）。

【讨论】：