样式 <input type="file"> [重复]答案

【问题标题】：Styling <input type="file"> [duplicate]样式 <input type="file"> [重复]
【发布时间】：2011-05-30 18:49:06
【问题描述】：

可能重复：
Styling an input type=“file” button

我正在尝试样式

<input type="file">

但我运气不佳。我想让文本框消失，只保留按钮。我该怎么做？

【问题讨论】：

看到这个答案 - stackoverflow.com/a/9546968/21579

标签： javascript css webforms input

【解决方案1】：

CSS方式（基本代码找到here）：

<html>
    <style type="text/css">
        div.fileinputs {
            position: relative;
        }

        div.fakefile {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1;
        }

        div.fakefile input[type=button] {
            /* enough width to completely overlap the real hidden file control */
            cursor: pointer;
            width: 148px;
        }

        div.fileinputs input.file {
            position: relative;
            text-align: right;
            -moz-opacity:0 ;
            filter:alpha(opacity: 0);
            opacity: 0;
            z-index: 2;
        }
    </style>

    <div class="fileinputs">
        <input type="file" class="file" />

        <div class="fakefile">
            <input type="button" value="Select file" />
        </div>
    </div>
</html>

【讨论】：

只有 CSS 并不能在所有浏览器中使用 :(
最好只使用 css 伪元素作为 :before 或 :after 以及它们的样式。

【解决方案2】：

没有简单的跨浏览器方式来设置文件输入类型的样式。因此，存在甚至使用 javascript 的解决方案。

这是一个 jQuery 插件，您可以使用它以跨浏览器的方式设置文件类型的样式：

File Style Plugin for jQuery

浏览器不允许你设置文件样式输入。文件样式插件解决了这个问题问题。它使您能够使用图像作为浏览按钮。你也可以风格文件名字段作为普通文本字段使用 CSS。它是用 JavaScript 和 jQuery。

You can check out the demo here

也发布在流行的 ajaxian.com 上，你也可以看看这个：

A Cheaky Way to Style an input type=”file”

Shaun Inman 有一个可爱的小宝贝允许您设置文件样式的 hack 使用 CSS 和 DOM 输入。

这些元素是出了名的痛苦处理，现在我们有选择盒装在 IE 上玩得很好，我们需要其他需要解决的问题:)

【讨论】：

【解决方案3】：

我编写了这个 jQuery 插件来简化文件输入的样式。使用 CSS 和“假元素”来获得你想要的结果。

http://github.com/jstnjns/jquery-file

希望有帮助！

【讨论】：

以及如何解决问题。我的更好，最重要的是工作。 royalsofts.moon.pk/careers.php点击浏览按钮
我认为没有人试图变得“更好”。但是，使用我构建的 jQuery 插件，您可以在选择后看到文件的名称，以及设置文本输入和按钮的样式（不仅仅是按钮，如您的示例中所示）。
我知道你说过你想去掉文本框，但这是一个巨大的可用性缺陷。无论如何，你可以用我的例子用 CSS 隐藏它。
链接github.com/jstnjns/jquery-file

【解决方案4】：

<label for="file" style="/* style this one, as you want */">Upload file</label>
<input id="file" name="file" type="file" style="display:none;">

【讨论】：

我试试这个恐怕不行；当您尝试单击“上传文件”时没有任何反应。
这种方法在 Safari 和 Chrome 中运行良好（在其他地方未经测试）...最好将 cursor: pointer; CSS 添加到标签中。
因为stackoverflow.com/questions/7742278/…而无法在firefox上工作
你确定这行得通吗？我正在用铬尝试它。最初它显示自定义按钮，但一旦我点击选择文件，它就会恢复到默认状态

【解决方案5】：

某些浏览器需要文件输入可见并手动单击浏览按钮，否则它不会向服务器提交任何内容。所以我建议 Saefraz 的第一个解决方案：用于 jQuery 的文件样式插件

【讨论】：