【更改表单元素默认样式】更改文件上传按钮样式

虽然我们无法直接更改表单的input[type=file]按钮，但是可以通过曲线救国的方式来实现。

思路大致是这样的：

1、将<input type='file' />按钮设置透明度为0

2、在<input type='file' />上面覆盖一个button，使二者位置完全重合。

HTML代码如下

<span class="sl-custom-file">
    <input type="button" value="点击上传文件" class="btn-file"/>
    <input type="file" class="ui-input-file" />
</span>

CSS代码

.sl-custom-file {
        position: relative;
        display: inline-block;
        zoom: 1;
        cursor: pointer;
        overflow: hidden;
        vertical-align: middle;
    }
　

.btn-file{
        background-color: #E95C33 !important;
            color: #fff !important;
            border: 1px solid #E95C33 !important;
            width: 150px !important;
            border-radius: 0 !important;
}    

 

    .sl-custom-file .ui-input-file {
        position: absolute;
        right: 0;
        top: 0;
        _zoom: 30;
        font-size: 300px \9;
        height: 100%;
        _height: auto;
        opacity: 0;
        filter: alpha(opacity=0);
        -ms-filter: "alpha(opacity=0)";
        cursor: pointer;
    }

 效果图如下：