Question

如何为Safari，Chrome和其他基于WebKit的浏览器设置file类型的表单输入字段？

现在，我得到的只是通常文本输入框顶部显示的选择文件按钮。

我在谷歌上看了一下，但还没有看到任何有用的东西。

Answer 1

创建时，所有渲染引擎都会自动生成一个按钮。从历史上看，该按钮完全不具有风格。但是，最近Trident和WebKit通过伪元素添加了钩子。

<强>三叉戟

从IE10开始，可以使用::-ms-browse伪元素设置文件输入按钮的样式。基本上，您应用常规按钮的任何CSS规则都可以应用于伪元素。例如：

<input type="file">

::-ms-browse {
    background: black;
    color: red;
    padding: 1em;
}

在Windows 8的IE10中显示如下：

enter image description here

<强>的WebKit

WebKit为其文件输入按钮提供了一个钩子，其中包含::-webkit-file-upload-button伪元素。几乎任何CSS规则都可以应用，因此Trident示例也适用于此：

<input type="file">

::-webkit-file-upload-button {
    background: black;
    color: red;
    padding: 1em;
}

在OS X上的Chrome 26中显示如下：

enter image description here

Answer 2

几天前，我有一个任务是使用CSS（主要是带有额外效果的CSS3）来设置input="file"的样式，并且可以这样做。

我已经写过（或对filestyle插件做了一些小的重写）一个jQuery插件。它的核心行为与图像相同，但我完全用span和div s替换了图像。插件隐藏input="file"然后使用CSS构建包装器，最后触发隐藏输入的单击操作。

我希望它对每个人都有帮助。

Answer 3

我不相信你可以。 Apple最近才决定启用其表单控件的样式。他们认为，当按钮和输入看起来不像按钮时，很难找到按钮和输入 - 所以他们可能不会让你设置文件上传输入的样式。

我大约90％肯定你做不到。

Answer 4

拥有Flash上传器可能会带来更多痛苦：

它只能在IE中与您的浏览器在同一个会话中工作，并且在所有其他浏览器中进行新会话，因此您将从后端安全应用程序中退出。

唯一的解决方案是将会话数据发送到Flash ......你去了！

我登陆此页面查看或设置Safari的文件输入项的样式...我有很多只在150px宽的表格单元格中，但这些输入正在迫使它变大。

到目前为止，我找到了一个解决方案，那就是让我们使用style="position:absolute;z-index:2"漂浮在其余部分之上，同时我的TD具有position:relative样式。

这是一个糟糕的坏解决方案，我知道！

Answer 5

Firefox 4将允许您设置输入元素的样式（以一种方式）：link

希望其他浏览器能够抓住这个消除的巨大痛点。

Answer 6

如果您只对webkit浏览器感兴趣，可以使用其内置的伪选择器来定位文件输入元素的不同部分。例如input::-webkit-file-upload-button {...}。