样式＆lt;输入类型=＆ldquo;文件＆rdquo;＆gt; [重复]

这个问题在这里已有答案：样式输入类型=＆ldquo;文件＆rdquo;按键 39个答案

已邀请:

5 个回复

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>

鞋扣蚊冈借

没有简单的跨浏览器方式来设置输入类型的文件的样式。因此存在甚至使用javascript的解决方案。这是一个jQuery插件，您可以使用它以跨浏览器方式设置文件类型的样式： jQuery的文件样式插件浏览器不允许您设置文件样式投入。文件样式插件修复此问题问题。它使您可以使用图像作为浏览按钮。你也可以风格 filename字段为普通文本字段用css。它是用来写的 JavaScript和jQuery。你可以在这里查看演示也发布在流行的ajaxian.com上，你也可以看看这个：样式输入类型=“文件”的Cheaky方式 Shaun Inman有一个可爱的小小 hack，允许你设置文件样式使用CSS和DOM输入。这些因素众所周知是痛苦的处理，现在我们选择盒装在IE上玩得很好，我们需要别的东西要修好:)

冉案

我编写了这个jQuery插件，使文件输入的样式更加简单。使用CSS和“假元素”来获得所需的结果。 http://github.com/jstnjns/jquery-file 希望有所帮助！

琶竞捆栓

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

耐钨徒

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

要回复问题请先登录或注册

发起人

问题状态

最新活动: 2019-08-19 10:15
浏览: 102
关注: 76 人

样式＆lt;输入类型=＆ldquo;文件＆rdquo;＆gt; [重复]

与内容相关的链接

5 个回复

发起人

问题状态