input[type=file]是上传文件离不开的标签元素，但是默认样式太丑，完全不符合前端人对审美的需求，今天就来教大家如何改造默认样式。

　　首先给input[type=file]标签包装一个外围容器，这里我使用span元素，当然其他元素也可以。

　　代码如下：

　　<span id="uploadBtn">选择文件

　　 <input type="file" class="file">

　　</span>

　　接下来的事情交给css来搞定

　　代码如下：

　　#uploadBtn{

　　 display:inline-block;

　　 position: relative;

　　 color: #fff;

　　 background-color: #1989fa;

　　 border-color: #1989fa;

　　 padding: 0 30px;

　　 font-size: 14px;

　　 line-height: 42px;

　　 font-weight: 500;

　　 -webkit-transition: all .15s;

　　 transition: all .15s;

　　 padding: 0 15px;

　　 line-height: 32px;

　　 border-radius: 4px;

　　}

　　.file{

　　 position: absolute;

　　 width: 100%;

　　 height: 100%;

　　 left: 0;

　　 top: 0;

　　 opacity: 0;

　　}

　　接下来就是效果展示了：

　　大功告成，快去尝试吧~