虽然我们无法直接更改表单的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; }
效果图如下: