样式<input type =“file”/>

时间:2010-12-26 04:19:25

标签: javascript css webforms input

  

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

我正试图打造

<input type="file">

但我运气不好。我想让文本框消失,只保留按钮。我该怎么办?

5 个答案:

答案 0 :(得分:20)

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>

答案 1 :(得分:12)

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

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

  

浏览器不允许您设置文件样式   投入。文件样式插件修复了这个问题   问题。它使您可以使用图像   作为浏览按钮。你也可以风格   filename字段为普通文本字段   用css。它是用来写的   JavaScript和jQuery。

You can check out the demo here


同样刊登在热门的ajaxian.com上,您也可以看一下:

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

     

这些因素众所周知是痛苦的   处理,现在我们选择   盒装在IE上玩得很好,我们需要   别的东西要修理:)

答案 2 :(得分:4)

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

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

希望有所帮助!

答案 3 :(得分:3)

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

答案 4 :(得分:0)

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