更改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: 0;
    left: 0;
    opacity: 0;　　　　　　　　// 将原来的input变透明
    z-index: 1;
    cursor: pointer;
}

效果如图：