<input type="file"> - 自定义样式/CSS

Question

有没有一种方法可以使用 CSS 让所有浏览器中的 <input type="file"> 看起来相同？

- Pydev UA

---

重复问题：http://stackoverflow.com/search?q=style+input+file - Pekka

可能是如何使用CSS3 / Javascript样式化“输入文件”？的重复问题。 - Pekka

好问题...但我已经尝试了所有方法，都不起作用...希望有人能给出答案！ - Atul Dravid

为什么需要回答已经有几十个非常好的答案的重复问题？ - Pekka

Answer 1

Quirksmode.org有一篇关于此的有趣文章：http://www.quirksmode.org/dom/inputfile.html

（说明：此文提供了关于HTML文件上传控件的详细信息，建议阅读。）

- Lekensteyn

Answer 2

尝试这个方法 -

1. 将一个普通的 <input type="file"> 放入一个带有 position: relative 的元素中。
2. 在同一个父元素中，添加一个已经正确设置样式的普通 <input> 和一张图片。将这些元素设置为绝对定位，使它们占据与 <input type="file"> 相同的位置。
3. 将 <input type="file"> 的 z-index 设置为 2，使其位于已设置样式的 <input>/图片之上。
4. 最后，将 <input type="file"> 的 opacity 设为 0。此时 <input type="file"> 实际上变成了透明的，而 <input>/图片的样式可以显示出来，但你仍然可以点击“浏览”按钮。如果按钮被放置在图片之上，则用户似乎会点击图片并弹出正常的文件选择窗口。（请注意，不能使用 visibility: hidden，因为一个真正不可见的元素也是无法点击的，我们需要让 <input type="file"> 保持可点击状态）到此为止，这种效果可以通过纯 CSS 实现。然而，还缺少一个功能。
5. 当用户选择了一个文件后，可见的虚拟输入框应该显示此文件的正确路径，就像普通的 <input> 一样。只需将 <input type="file"> 的新值复制到虚拟输入框中即可，但我们需要使用 JavaScript 来实现。

更多细节 - http://www.quirksmode.org/dom/inputfile.html

- Sachin Shanbhag

Answer 3

你可以尝试使用swfupload，这是一个嵌入了微小Flash文件的开源项目，而不是文件输入。您可以使用CSS样式来自定义触发Flash上传的按钮。

缺点：它可能很难使用，并且当然您的用户必须拥有Flash。

优点：在上传对话框中可以同时选择多个文件！

- livingtech

Answer 4

你可以轻松地为自己的文件输入按钮设置样式。只需将输入元素的CSS属性设置为style="display:none"，并在JavaScript中处理点击事件。更多阅读材料：使用click()方法使用隐藏的文件输入元素 编辑：出于安全原因，这种方法不再起作用。一个小技巧是将CSS样式设置为visibility:hidden。这里有一个JSFiddle，我将我的<input>字段放在页面末尾，并使用<a>元素触发打开文件对话框。

//html
<input id="openFileDialog" type="file" id="files" name="files[]" accept=".json, .txt" />

//js
$("#openFile").on("click", function () {
    //throws an error if browser doesn't support file upload
    checkFileApiCompatibility();

    //opens File Dialog
    $("#openFileDialog").click();
    $("#openFileDialog").on('change', function(){
        openFile(this);
    });
});

- philx_x