一个漂亮的上传按钮input[type=file]

.xj-file input[type=file]{border:none; outline:none; position:absolute; top:0; left:0px; width:54px; height:34px; cursor:pointer; filter:alpha(opacity=0); opacity:0;}

1 <div class="input-group xj-file xj-panel-top">
2           <span class="input-group-btn">
3             <button class="btn btn-default" type="button">浏览</button>
4           </span>
5           <input type="text" class="form-control" id="viewfile" placeholder="">
6           <input type="file" id="" onchange="document.getElementById('viewfile').value=this.value;">
7         </div>

基于bootstrap3,碰上一个处女坐的总监，不知道是福是祸，虽然我也是，这个最讨厌的上传按钮其实美化思路也非常简单

将其定位起来透明度设为0，再将其获取的路径值传给美化过的显示框就OK啦！效果图如下