样式化input type="file"按钮

你如何风格输入类型=“文件”按钮?

<输入类型=“文件” />

当前回答

把上传文件按钮放在你漂亮的按钮或元素上并隐藏它。

非常简单，可以在任何浏览器上工作

<div class="upload-wrap">
    <button type="button" class="nice-button">upload_file</button>
    <input type="file" name="file" class="upload-btn">
</div>

风格

.upload-wrap {
    position: relative;
}

.upload-btn {
    position: absolute;
    left: 0;
    opacity: 0;
}

2017-08-23 12:32:08

其他回答

这是简单的jquery。对Ryan的建议稍加修改后给出一个代码示例。

基本的html:

<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">

当你准备好时，一定要在输入上设置样式:不透明度:0 你不能设置display: none，因为它需要是可点击的。但是你可以把它放在“new”按钮下面，或者如果你喜欢的话，把它塞进z-index的其他东西下面。

设置一些jquery，当你点击图像时，点击真正的输入。

$('#image_icon').click(function() {
    $('#the_real_file_input').click();
});

现在你的按钮开始工作了。更改时只需剪切并粘贴值。

$('input[type=file]').bind('change', function() {
    var str = "";
    str = $(this).val();
    $("#filename").text(str);
}).change();

发长音!您可能需要将val()解析为更有意义的内容，但您应该已经全部设置好了。

2011-12-04 00:38:33

当<input type="file">被创建时，所有渲染引擎都会自动生成一个按钮。从历史上看，这个按钮是完全不可样式的。然而，Trident和WebKit通过伪元素添加了钩子。

三叉戟

从IE10开始，文件输入按钮可以使用::-ms-browse伪元素来设置样式。基本上，应用于普通按钮的任何CSS规则都可以应用于伪元素。例如:

:: -ms-browse { 背景:黑色; 颜色:红色; 填充:1 em; ｝ < input type = " file " >

Windows 8操作系统的IE10界面显示如下:

WebKit

WebKit为其文件输入按钮提供了一个带有::-webkit-file-upload-button伪元素的钩子。同样，几乎任何CSS规则都可以应用，因此Trident的例子也可以在这里工作:

:: -webkit-file-upload-button { 背景:黑色; 颜色:红色; 填充:1 em; ｝ < input type = " file " >

在OS X操作系统下，Chrome 26界面显示如下:

2013-05-01 07:37:26

你不需要JavaScript !下面是一个跨浏览器的解决方案:

请看这个例子!-适用于Chrome/FF/IE - (IE10/9/8/7)

最好的方法是将一个带有for属性的自定义标签元素附加到隐藏的文件输入元素。(标签的for属性必须匹配文件元素的id，这样才能工作)。

<label for="file-upload" class="custom-file-upload">
    Custom Upload
</label>
<input id="file-upload" type="file"/>

作为一种替代方法，你也可以直接用标签包装文件输入元素:

<label class="custom-file-upload">
    <input type="file"/>
    Custom Upload
</label>

在样式方面，只需使用属性选择器隐藏输入元素。

input[type="file"] {
    display: none;
}

然后，您所需要做的就是设置自定义标签元素的样式。(例子)。

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

1 -值得注意的是，如果你使用display: none隐藏元素，它将在IE8及以下版本中不起作用。还要注意，jQuery验证默认情况下不验证隐藏字段。如果这两种情况对您来说是一个问题，这里有两种不同的方法来隐藏输入(1,2)，在这种情况下可以工作。

2014-09-13 17:24:14

我能想到的唯一方法是在它被渲染后用javascript找到按钮，并分配一个样式给它

你也可以看看这个记录

2009-02-21 10:41:05

我发现了一个非常简单的方法来切换文件按钮到图片。你只需要给图片贴上标签，然后把它放在文件按钮的顶部。

<html>
<div id="File button">
    <div style="position:absolute;">
        <!--This is your labeled image-->
        <label for="fileButton"><img src="ImageURL"></label>
    </div>
    <div>
        <input type="file" id="fileButton"/>
    </div>
</div>
</html>

单击标记图像时，选择文件按钮。

2013-09-04 07:08:50

样式化input type="file"按钮

推荐文章

最新文章

标签