怎么改变上传按钮的样式

百度了一下大佬的，然后再根据自己的情况改成我想要的，在此记录。

• 我的上传按钮

<span class="file"><i
                        class="fa fa-picture-o fa-lg" aria-hidden="true"></i>
                    <input type="file" name="" onchange="showPreview(this)">
                </span>
           

• 按钮的css样式

.file {
    position: relative;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
    float: left;
    width: 23px;
    height: 18px;
    margin-left: 10px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    width: 23px;
    height: 18px;
    margin-left: 10px;
}
.file:hover {
    text-decoration: none;
}
           

• 最后成果

那个表情不是，是第二个图片那个，点击图片就可以选择电脑的图片，还可以在下面可编辑的div显示。如果需要在可编辑的div显示图片的写法，可看看我上篇文章。