样式化<input type="file">元素

Question

样式化<input type="file">元素

12

可能是重复问题：
如何为input type="file"按钮设置样式？

我正在尝试对

<input type="file">

但是我没有太多运气。我想让文本框消失，只保留按钮。我该怎么做？

- Moon

请查看此答案 - https://dev59.com/dXRB5IYBdhLWcg3wn4UL#9546968 - Jeff Widmer

5个回答

12

没有一种易于跨浏览器的方式来样式化文件输入类型。因此，存在一些解决方案，甚至使用JavaScript。

以下是一个你可以使用的jQuery插件，以跨浏览器的方式样式化文件类型：

File Style Plugin for jQuery

浏览器不允许您为文件输入样式化。 File Style插件解决了这个问题。它使您能够将图像用作浏览按钮。您还可以使用CSS将文件名字段样式化为普通文本字段。它是使用JavaScript和jQuery编写的。

您可以在此处检查演示

正如在流行的ajaxian.com上发布的那样，您也可以查看以下内容：

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

Shaun Inman有一个可爱的小技巧，可以让您使用CSS和DOM样式化文件输入。

这些元素极其难以处理，现在我们在IE上有选择框，我们需要其他东西来修复 :)

- Sarfraz

4

我写了这个jQuery插件，使文件输入框的样式变得更加简单。使用CSS和“伪元素”来获得所需的结果。

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

希望对你有所帮助！

- JSTNJNS

这如何解决问题呢？我的方法更好，而且最重要的是它能正常工作。请点击以下链接：http://royalsofts.moon.pk/careers.php，然后点击浏览按钮。 - Moon

我不认为有人试图变得“更好”。然而，通过我构建的jQuery插件，您可以在选择后看到文件名，并且可以样式化文本输入框和按钮（不仅仅是按钮，就像您的示例一样）。 - JSTNJNS

我知道你说你想摆脱文本框，但这是一个巨大的可用性缺陷。不过，你可以使用我的例子通过CSS来隐藏它。 - JSTNJNS

链接 https://github.com/jstnjns/jquery-file - FLOQ Design

3

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

- boz

很抱歉，当我尝试时它不起作用；当你尝试点击“上传文件”时什么也没有发生。 - Peter O.

2

这种方法在Safari和Chrome中效果很好（未经测试其他浏览器）...如果您将“cursor: pointer;” CSS添加到标签上，效果最佳。 - Dave Everitt

无法在Firefox上工作，因为https://dev59.com/1msz5IYBdhLWcg3wrJsx。 - Ryu_hayabusa

你确定这个能用吗？我在Chrome中试了一下。一开始它显示自定义按钮，但是一旦我点击选择文件，它就回到了默认状态。 - Ayesha

0

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

- erinus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user432219 · Accepted Answer

CSS方式（基础代码在这里找到）：

<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>