怎麼改變上傳按鈕的樣式

百度了一下大佬的，然後再根據自己的情況改成我想要的，在此記錄。

• 我的上傳按鈕

<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顯示圖檔的寫法，可看看我上篇文章。