样式化input type="file"按钮

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

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

当前回答

我在这里找到了一个使用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

其他回答

这是一个很好的方法来做材料/角文件上传。你可以用bootstrap按钮做同样的事情。

注意，我使用了<a>而不是<button>，这允许点击事件冒泡。

<label>
    <input type="file" (change)="setFile($event)" style="display:none" />

    <a mat-raised-button color="primary">
      <mat-icon>file_upload</mat-icon>
      Upload Document
    </a>

  </label>

2017-11-13 23:09:13

样式化文件输入是出了名的困难，因为大多数浏览器不会改变CSS或javascript的外观。

即使输入的大小也不会对以下内容做出反应: