input类型为file时标签的美化问题

由于个人能力有限，异步上传时有些细节的处理方式还没想明白，所以先用了同步上传的方式来做功能，但是！！！type=“file”你能不能不要这么丑，bootstrap你也不管一下！！！

从网上看了些文章之后，发现基本都是同一种解决方式，但是其他文章的结构上有问题，这里自己再整理一遍

上效果图，具体颜色自己CSS里改：

上结构

<div class="file" id="file1">
    <input type="file" name="img1" value="请选择图片">
    <div class="fileerrorTip1">请选择图片</div>
    <div class="showFileName1"></div>
 </div>

上CSS

.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F