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

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

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

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

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