HTML中文件上傳時(shí)使用的<input type=＂file＂;元素的樣式自定義

Web頁(yè)面中，在需要上傳文件時(shí)基本都會(huì)用到<input type="file">元素，它的默認(rèn)樣式：

chrome下：

IE下：

不管是上面哪種，樣式都比較簡(jiǎn)單，和很多網(wǎng)頁(yè)的風(fēng)格都不太協(xié)調(diào)。

根據(jù)用戶的需求，設(shè)計(jì)風(fēng)格，改變其顯示樣式的場(chǎng)合就比較多了。

如果，要像下面一樣做一個(gè)bootstrap風(fēng)格的上傳按鈕該如何實(shí)現(xiàn)。

搭建上傳按鈕所需的基本元素

效果（chrome）：

現(xiàn)在看到的分兩行顯示。

外圍之所以沒(méi)有換成div，是因?yàn)樵贗E7-瀏覽器中，只要不是設(shè)成inline，它的寬度全都會(huì)撐開(kāi)到能撐到的寬度。如果設(shè)成inline，那元素的寬度就無(wú)法調(diào)整，所以這里用span然后設(shè)成inline-block能解決這樣的問(wèn)題。

增加樣式將兩行變成一行

css:

效果：

默認(rèn)是沒(méi)有淺藍(lán)色邊框，只有鼠標(biāo)去點(diǎn)擊后，才會(huì)顯示，這里顯示出來(lái)是為了看得清楚。

通過(guò)將外圍的span設(shè)成display:relative，將input設(shè)成display:absolute的方式讓他們都脫離文檔流。

通過(guò)將input限定在外圍的span中進(jìn)行絕對(duì)定位的方式讓本來(lái)兩行顯示的變成一行顯示。

實(shí)際上這里已經(jīng)overflow了，真正的寬度是“上傳”文字的寬度，修改fileinput-button樣式增加overflow: hidden

效果：

很有意思，能看到上邊后右邊的藍(lán)色邊框了吧，其實(shí)就是把左邊和下邊的溢出部分給隱藏了。

這時(shí)候用鼠標(biāo)去點(diǎn)擊“上傳”兩個(gè)字實(shí)際上是點(diǎn)在input上，能夠顯示“打開(kāi)”對(duì)話框，因?yàn)轱@示層級(jí)上input要比“上傳”更靠近用戶。

注意input定位中的right，為什么不用left定位。

當(dāng)我們改成left后。

效果（chrome）：

效果（IE）：

在chrome下input元素中的選擇按鈕露出來(lái)，但是沒(méi)關(guān)系，可以通過(guò)后面的設(shè)透明的方式把它透明掉。

但是在IE下確是會(huì)把輸入框露出來(lái)，關(guān)鍵是鼠標(biāo)移到輸入框上時(shí)，指針會(huì)變成輸入狀態(tài)，這個(gè)就很沒(méi)法處理了。

通過(guò)right的定位方式把輸入框移到左邊去的方式，可以在IE下回避出現(xiàn)鼠標(biāo)指針變成輸入態(tài)的情況。

透明input元素

css：

效果：

input完全不見(jiàn)了蹤影，點(diǎn)擊“上傳”依然有效。

可以支持IE8+。

引入bootstrap，并添加按鈕樣式

head中增加外部css和js的引用。

增加按鈕樣式。

效果：

解決大小問(wèn)題

如果為fileinput-button樣式增加width:100px，將外圍的span設(shè)成寬100px，會(huì)發(fā)現(xiàn)點(diǎn)擊下部是沒(méi)有反應(yīng)的，原因就是input是默認(rèn)大小，無(wú)法覆蓋下部。

可以通過(guò)為input設(shè)置一個(gè)很大的字號(hào)將其撐大的方式來(lái)解決覆蓋問(wèn)題，這里就設(shè)個(gè)200px。

這樣就能解決覆蓋問(wèn)題。

完成。

參考：jQuery-File-Upload

如果是要兼容IE7-可以參考jQuery-File-Upload中的寫法。

代碼：