Question

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

Answer 1

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

Answer 2

试试这个 -

取正常并将其放入元素中职位：亲属。
要对同一个父元素添加一个正常和图像，其中有正确的风格。位置这些元素绝对是这样的他们占据了同一个地方
将z的索引设置为2，使其位于打开状态样式输入/图像的顶部。
最后，设置不透明度现在变得有效了看不见的，风格输入/图像闪耀，但你仍然可以点击“浏览” 按钮。如果按钮已定位在图像之上，用户似乎点击图像和获取正常的文件选择窗口。（注意你不能使用能见度：隐藏，因为真实隐形元素无法点击，我们也需要保持可点击状态）直到这里效果都可以通过纯CSS实现。然而，一个功能仍然缺乏。
当用户选择了文件时应该是可见的假输入字段显示此文件的正确路径，像往常一样将。这只是一个问题将新值复制到虚假输入字段，但我们需要JavaScript来做此。

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

Answer 3

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

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

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

Answer 4

您可以简单地设置自己的文件输入按钮的样式。只需将输入元素的CSS属性设置为style="display:none"，然后在javascript中处理click事件。进一步阅读： 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);
    });
});

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

4 个答案: