關於input type = "file" 樣式的美化

首先，<input type = "file">的默認樣式是這樣的：

默認の樣式

 

默認的樣式直接放到網頁中總覺得不太協調，於是我在網上查找它的美化方法。大方向上基本是用CSS美化，但細化到具體的美化方式則多種多樣。在眼花繚亂之下找到了這篇文章：修改 input type=file 的樣式的最簡單方法

什麼？最簡單方法？我來看一看你有多簡單。

以下是作者的思路：

1、重寫一個新的樣式 ；

2、將默認的樣式設爲display:none，即設爲不可見 ；

3、在js裏調用：當點擊新樣式的時候，調用這個input的點擊事件。

 實現方式：

這裏我和該文作者一樣，使用css+js（jquery）的方式美化。

HTML部分 使用一個div，把一個<button>和<input type = "file">包裹起來：

    <div id="button">
        <button id="upload">上傳圖片</button> 
        <input type="file" id="fileul">
    </div>

css部分：

#fileul{
     display: none;
}

js部分 這裏我同樣使用了jquery：

$(document).ready(function(){
   $('#upload').click(function(){ 
       $('#fileul').click()
   });
});

最終效果：

最終效果呈現爲一個按鈕，點擊後觸發對input的點擊事件，彈出文件選擇的對話框。