首頁 > 開發者 > JavaScript
html中，檔案上傳時使用的<input type="file">的樣式自訂，
Web頁面中，在需要上傳檔案時基本都會用到<input type="file">元素，它的預設樣式：
chrome下：
IE下：
不管是上面哪種，樣式都比較簡單，和很多網頁的風格都不太協調。
根據使用者的需求，設計風格，改變其顯示樣式的場合就比較多了。
如果，要像下面一樣做一個bootstrap風格的上傳按鈕該如何?。
搭建上傳按鈕所需的基本元素
<span class=""> <span>上傳</span> <input type="file"> </span>
效果（chrome）：
現在看到的分兩行顯示。
外圍之所以沒有換成div，是因為在IE7-瀏覽器中，只要不是設成inline，它的寬度全都會撐開到能撐到的寬度。如果設成inline，那元素的寬度就無法調整，所以這裡用span然後設成inline-block能解決這樣的問題。
增加樣式將兩行變成一行
<span class="fileinput-button""> <span>上傳</span> <input type="file"> </span>
css:
.fileinput-button { position: relative; display: inline-block; } .fileinput-button input{ position: absolute; right: 0px; top: 0px; }
效果：
預設是沒有淺藍色邊框，只有滑鼠去點擊後，才會顯示，這裡顯示出來是為了看得清楚。
通過將外圍的span設成display:relative，將input設成display:absolute的方式讓他們都脫離文檔流。
通過將input限定在外圍的span中進行絕對位置的方式讓本來兩行顯示的變成一行顯示。
實際上這裡已經overflow了，真正的寬度是“上傳”文字的寬度，修改fileinput-button樣式增加overflow: hidden
.fileinput-button { position: relative; display: inline-block; overflow: hidden; }
效果：
很有意思，能看到上邊後右邊的藍色邊框了吧，其實就是把左邊和下邊的溢出部分給隱藏了。
這時候用滑鼠去點擊“上傳”兩個字實際上是點在input上，能夠顯示“開啟”對話方塊，因為顯示層級上input要比“上傳”更靠近使用者。
注意input定位中的right，為什麼不用left定位。
當我們改成left後。
效果（chrome）：
效果（IE）：
在chrome下input元素中的選擇按鈕露出來，但是沒關係，可以通過後面的設透明的方式把它透明掉。
但是在IE下確是會把輸入框露出來，關鍵是滑鼠移到輸入框上時，指標會變成輸入狀態，這個就很沒法處理了。
通過right的定位方式把輸入框移到左邊去的方式，可以在IE下迴避出現滑鼠指標變成輸入態的情況。
透明input元素
css：
.fileinput-button { position: relative; display: inline-block; overflow: hidden; } .fileinput-button input{ position: absolute; left: 0px; top: 0px; opacity: 0; -ms-filter: 'alpha(opacity=0)'; }
效果：
input完全不見了蹤影，點擊“上傳”依然有效。
可以支援IE8+。
引入bootstrap，並添加按鈕樣式
head中增加外部css和js的引用。
<link rel="stylesheet" href="bootstrap/bootstrap.css"> <link rel="stylesheet" href="bootstrap/bootstrap-theme.css"> <script src="bootstrap/jquery-1.10.2.js"></script> <script src="bootstrap/bootstrap.js"></script>
增加按鈕樣式。
<span class="btn btn-success fileinput-button"> <span>上傳</span> <input type="file"> </span>
效果：
解決大小問題
如果為fileinput-button樣式增加width:100px，將外圍的span設成寬100px，會發現點擊下部是沒有反應的，原因就是input是預設大小，無法覆蓋下部。
可以通過為input設定一個很大的字型大小將其撐大的方式來解決覆蓋問題，這裡就設個200px。
.fileinput-button input{ position:absolute; right: 0px; top:0px; opacity: 0; -ms-filter: 'alpha(opacity=0)'; font-size: 200px; }
這樣就能解決覆蓋問題。
完成。
參考：jQuery-File-Upload
如果是要相容IE7-可以參考jQuery-File-Upload中的寫法。
代碼：
<!DOCTYPE html><html><head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <link rel="stylesheet" href="bootstrap/bootstrap.css"> <link rel="stylesheet" href="bootstrap/bootstrap-theme.css"> <script src="bootstrap/jquery-1.10.2.js"></script> <script src="bootstrap/bootstrap.js"></script> <style> .fileinput-button { position: relative; display: inline-block; overflow: hidden; } .fileinput-button input{ position:absolute; right: 0px; top: 0px; opacity: 0; -ms-filter: 'alpha(opacity=0)'; font-size: 200px; } </style></head><body style="padding: 10px"> <div align="center"> <span class="btn btn-success fileinput-button"> <span>上傳</span> <input type="file"> </span> </div></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
