样式化input type="file"按钮

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

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

当前回答

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

<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" name="media" style="display-none" onchange="document.media.submit()">

我通常会使用简单的javascript来定制文件输入标记。一个隐藏的输入字段，点击按钮，javascript调用隐藏字段，简单的解决方案与任何css或一堆jquery。

<button id="file" onclick="$('#file').click()">Upload File</button>

2013-08-13 19:48:58

我在这里找到了一个使用jQuery的非常聪明的解决方案，它可以在所有旧浏览器和新浏览器中工作。它使用实际的文件浏览按钮来处理所有样式和click()问题。我做了一个简单的javascript版本:小提琴解决方案非常简单，就像天才一样:让文件输入不可见，然后用一段代码把它放在mousecursor下面。

<div class="inp_field_12" onmousemove="file_ho(event,this,1)"><span>browse</span>
    <input id="file_1" name="file_1" type="file" value="" onchange="file_ch(1)">
</div>
<div id="result_1" class="result"></div>
<script>
    function file_ho(e, o, a) {
        e = window.event || e;
        var x = 0,
        y = 0;
        if (o.offsetParent) {
            do {
            x += o.offsetLeft;
            y += o.offsetTop;
            } while (o = o.offsetParent);
        }
    var x1 = e.clientX || window.event.clientX;
    var y1 = e.clientY || window.event.clientY;
    var le = 100 - (x1 - x);
    var to = 10 - (y1 - y);
    document.getElementById('file_' + a).style.marginRight = le + 'px';
    document.getElementById('file_' + a).style.marginTop = -to + 'px';
    }
</script>
<style>
    .inp_field_12 {
        position:relative;
        overflow:hidden;
        float: left;
        width: 130px;
        height: 30px;
        background: orange;
    }
    .inp_field_12 span {
        position: absolute;
        width: 130px;
        font-family:'Calibri', 'Trebuchet MS', sans-serif;
        font-size:17px;
        line-height:27px;
        text-align:center;
        color:#555;
    }
    .inp_field_12 input[type='file'] {
        cursor:pointer;
        cursor:hand;
        position: absolute;
        top: 0px;
        right: 0px;
        -moz-opacity:0;
        filter:alpha(opacity=0);
        opacity: 0;
        outline: none;
        outline-style:none;
        outline-width:0;
        ie-dummy: expression(this.hideFocus=true);
    }
    .inp_field_12:hover {
        background-position:-140px -35px;
    }
    .inp_field_12:hover span {
        color:#fff;
    }
</style>

2013-04-18 12:44:44

CSS在这里可以做很多事情…耍点小花招……

<div id='wrapper'>
    <input type='file' id='browse'>
</div>
<style>
    #wrapper {
            width: 93px; /*play with this value */
            height: 28px; /*play with this value */
            background: url('browseBtn.png') 0 0 no-repeat;
            border:none;
            overflow:hidden;
    }

    #browse{
            margin-left:-145px; /*play with this value */
            opacity:0; /* set to .5 or something so you can better position it as an overlay then back to zero again after you're done */
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    }
</style>

::参考::http://site-o-matic.net/?viewpost=19

修道院

2012-06-20 21:16:48

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

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

<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

$ (' .new_Btn ') .click(函数(){ $ (' # html_btn ') .click (); })； .new_Btn { // CSS属性｝ # html_btn { 显示:没有; ｝ < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < /脚本> < div class = " new_Btn”> SelectPicture < / div > < br > <input id="html_btn" type='file' /><br> .

你也可以在没有jQuery的情况下使用正常的JavaScript实现你的目标。

现在newBtn与html_btn链接，你可以像你想要的那样样式你的新btn:D

2012-08-02 08:13:31

样式化input type="file"按钮

推荐文章

最新文章

标签