關於文件上傳按鈕樣式美化的一些總結

     最近在公司作項目遇到個需求，就是要作一個上傳圖片的功能，很簡單的一個功能，可是在實現過程當中卻遇到了不少坑，在這裏總結一下，讓碰到此問題的朋友也能夠有更多選擇，如下所述純屬我的觀點，若有不一樣的方法，歡迎在評論區留言交流，共同進步！
       剛開始個人想法是直接用定位（position）+透明度（opacity）直接來實現，實現的過程很順利，可是最後卻發現了一個問題，什麼問題呢，很簡單，就是用戶體驗的問題，我想給這個按鈕加一個鼠標移入變手的效果，卻發現始終有一部分不會生效，檢查代碼發現原來是由於上傳文件的按鈕不會應用這個樣式，那我我就想把他移出到按鈕以外的位置，可是這樣就會出現按鈕超寬的問題，即便在看不見的部位也能點到，因此我就這個問題開始了一些實驗，在網上也找過方法，發現都不是我想要的，最後決定本身來寫一寫，不研究不知道，一研究還發現了很多方法能實現，我總結除了三種實現的方法以及實現思路，但願對你們有幫助，若是還有其餘的方法，請在評論區留言，共同窗習，好了廢話很少說，貼代碼：

<!--html結構-->
<!--第一種方法:經過定位+透明度來實現（不推薦）-->
<div class="first">
    第一種方法
    <button>上傳圖片</button>
    <input type="file">
</div>

/*css代碼*/
/*第一種的按鈕樣式*/
.first{
    position: relative;
    height: 30px;
    line-height: 30px;
}
.first button,.first input{
    position: absolute;
    left: 85px;
    top: 0;
    width: 100px;
    height: 30px;
    color: #fff;
    background-color: skyblue;
    border-radius: 5px;
    border: none;
    outline: none;
    cursor: pointer;
}
.first input{
    opacity: 0;
    width: 185px;
    left: 0;/*這裏是爲了讓cursor效果在按鈕內徹底生效，可是弊端就是寬度增長，在按鈕左側看不見的位置也能點擊到*/
}

<!--html結構-->
<!--第二種方法：經過label的關聯屬性來實現-->
<div class="item">
    第二種方法
    <label for="file1">上傳圖片</label>
    <input type="file" id="file1">
</div>

/*css代碼*/
/*第二種的按鈕樣式*/
.item label{
    display: inline-block;
    width: 100px;
    height: 30px;
    text-align: center;
    color: #fff;
    line-height: 30px;
    background-color: skyblue;
    border-radius: 5px;
    cursor: pointer;
}
.item input{
    display: none;
}

<!--html結構-->
<!--第三種方法:經過js事件綁定來實現（推薦）-->
<div class="item">
    第三種方法
    <button class="btn">上傳圖片</button>
    <input type="file" id="file">
</div>

/*css代碼*/
/*第三種的按鈕樣式*/
.item button{
    width: 100px;
    height: 30px;
    color: #fff;
    background-color: skyblue;
    border-radius: 5px;
    border: none;
    outline: none;
    cursor: pointer;
}
.item input{
    display: none;
}

// js代碼
// 第三種方法
document.querySelector('.btn').addEventListener('click',function () {
    document.querySelector('#file').click();
});

上面三種方法的樣式都是同樣的，如圖：

總結上述三種方法比較推薦第三種，第一種不推薦的理由：

       1、樣式代碼相對較多，而且對於cursor，file的按鈕不會應用樣式，因此須要讓他寬度更寬才行，這樣就會出如今不可見區域也能點擊上傳的bug（目前沒找到解決辦法）。

       2、結構固定。

       3、須要使用定位。

第二種不推薦的理由：

       侷限性：限制了元素，只能使用label，且只能使用id來進行關聯，id做爲惟一標識，頁面上定義的id越少越好，想要在同一頁面使用多個就須要定義多個id。

第三種推薦的理由：

       1、結構：樣式簡單，結構清晰

       2、適用範圍：不限制元素的使用，由於是用js動態綁定的固然，上面的純屬我的觀點，若是有更好的觀點歡迎在評論區留言討論~