更改file文件上传默认CSS样式

前言： 多数时候我们需要表单上传文件，如图片。但是浏览器默认的input[file]样式很不友好， 需要我们自己手动修改.

如图基于bootstrap布局的表单, 但file文件上传样式不敢恭维.

 <div class="form-group">
         <label for="avatar" class="col-md-2 control-label">上传头像:</label>
         <div class="col-md-6">
           <input type="file" name="avatar" id="avatar" class="form-control">
         </div>
 </div>

1. 首先在input[file]外层套一个容器（如div）

 <div class="form-group">
    <label for="avatar" class="col-md-2 control-label">上传头像:</label>
    <div class="col-md-6">
        <div class="avatar"><input type="file" name="avatar" id="avatar" class="form-control">点击这里上传文件</div>
     </div>
 </div>

2. 定义div.avatar样式， 和input[file]样式

 .avatar {
     position: relative;
     display: block;
     overflow: hidden;
     width: 100%;
     height: 34px;
     line-height: 34px;
     border: 1px solid #99D3F5;
     border-radius: 4px;
     text-align: center;
     background: #D0EEFF;
     cursor: pointer;
 }
 .avatar input {
     display: inline-block;
     position: absolute;　　　　// 设置input绝对定位，后面的文字才能往上移动
     font-size: 12px;
     top:;
     left:;
     opacity:;　　　　　　　　// 将原来的input变透明
     z-index:;
     cursor: pointer;
 }

效果如图：