更改html中上传文件样式

版权声明：本文为博主原创文章，未经博主允许不得转载。
上传文件时默认样式是：

其html为：

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

更改之后的样式为：

html为：

<div class="fileinp">
     <div class="upload">上传</div>
     <input type="file" class="file-up" title="">
</div>

其css为：

* {
    outline: none;
}
.file {
    margin-bottom: 30px;
}
.fileinp {
    width: 108px;
    overflow: hidden;
    position: relative;
}
.upload {
    width: 100px;
    background-color: #82b6f4;
    border-radius: 13px;
    text-align: center;
    padding: 4px;
    color: #fff;
}
.file-up {
    position: absolute;
    top: 0;
    right: 0;
    height: 30px;
    cursor: pointer;
    
}
.fileinp:hover .upload {
    background: #378eef;
}