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

Question

有没有办法使用一些 CSS 使 <input type="file"> 在所有浏览器中看起来都一样？

Answer 1

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

Answer 2

试试这个 -

1. 取一个法线并将其放入一个元素中 位置：相对。
2. 对于这个相同的父元素，添加一个 正常和图像，其中 有正确的样式。位置 这些元素是绝对的，所以 它们与 .
3. 将 的 z-index 设置为 2，使其位于 样式输入/图像的顶部。
4. 最后，设置不透明度 为 0. 现在变为有效 看不见的，风格 输入/图像通过，但你 仍然可以点击“浏览” 按钮。如果按钮位于 在图像的顶部，用户 似乎点击图像和 获取正常的文件选择 窗户。 （注意不能使用 可见性：隐藏，因为真正 不可见元素是不可点击的， 也是，我们需要保持可点击） 到这里效果可以 通过纯 CSS 实现。然而， 仍然缺少一项功能。
5. 当用户选择了一个文件时， 可见的假输入字段应该 显示此文件的正确路径， 作为一个正常人 将。这只是一个问题 将新值复制到假输入 字段，但我们需要 JavaScript 来做 这个。

更多详情 - http://www.quirksmode.org/dom/inputfile.html

Answer 3

您可以尝试使用 swfupload，这是一个在页面上嵌入微小 Flash 文件而不是文件输入的开源项目...您可以使用 CSS 为触发 Flash 上传的按钮设置任何您想要的样式。

缺点：使用起来可能会很棘手，当然你的用户必须有闪存。

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

Answer 4

您可以简单地设置自己的文件输入按钮的样式。 只需将输入元素的 CSS 属性设置为 style="display:none" 并在 javascript 中处理点击事件。进一步阅读： Using hidden file input elements using the click() method

编辑：事实证明，出于安全原因，这不再起作用。一个小技巧是将css样式设置为visibility:hidden。 这是一个JSFiddle，我将<input> 字段放在页面末尾的某个位置，并使用<a> 元素触发openFileDialog。

//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);
    });
});