利用label標(biāo)簽和CSS美化文件上傳表單(不兼容IE6)

發(fā)布時(shí)間：2011-06-20 21:30:43 作者：佚名

文件上傳類(lèi)型表單是一個(gè)讓很多前端開(kāi)發(fā)者糾結(jié)過(guò)的表單類(lèi)型，因?yàn)樗且粋€(gè)無(wú)法單純用CSS給它定義兼容的樣式。

上周的工作中有個(gè)批量上傳圖片的頁(yè)面，又遇到了這個(gè)問(wèn)題，于是，今天把我的解決方案奉獻(xiàn)給大家：利用label標(biāo)簽與CSS共同打造一個(gè)樣式可控的并兼容IE6之外主流瀏覽器的上傳表單。
實(shí)現(xiàn)思路通俗易懂：
利用LABEL與CSS美化文件上傳表單

首先，我們要新增一個(gè)與file相冊(cè)大小的button按鈕，然后利用label為初始的file類(lèi)型表單定義標(biāo)注(關(guān)于label的解釋與用法，此處不詳解，不了解的請(qǐng)自行查閱HTML手冊(cè))。如此一來(lái)，一個(gè)可以觸發(fā)選擇文件表單的按鈕就出來(lái)了。接下來(lái)，相信很多人都知道怎么做了。
有了一個(gè)可以觸發(fā)file表單的按鈕，只要通過(guò)絕對(duì)定位將file表單從文檔流中拖出，然后用z-index屬性將它的層級(jí)提升到比button按鈕高，同時(shí)將file表單的透明度置為0，這樣一來(lái)，file表單就正好覆蓋在button按鈕上了，并且可觸發(fā)選擇文件表單。此處有一點(diǎn)需要說(shuō)明，F(xiàn)ireFox中是無(wú)法通過(guò)width來(lái)設(shè)定寬度值的，所以需要用input的size值來(lái)設(shè)定file表單寬度值。
最后，附上樣例中的成型代碼：
HTML代碼:

復(fù)制代碼

代碼如下:

CSS代碼:

復(fù)制代碼

代碼如下:

.btns{position:relative}
.btns input{width:120px;height:30px}
.btns .btn_file_molding{position:absolute;left:0;top:0;z-index:1;border:0 none;filter:alpha(opacity=0);opacity:0}/*file的z-index要大于button*/

幾個(gè)注意的細(xì)節(jié)：
1.file表單與button按鈕的高寬一定要相同；
2.因各瀏覽器對(duì)file表單的表現(xiàn)不一致，其邊框一定要隱藏掉，以免出現(xiàn)各瀏覽器不兼容問(wèn)題；
3.firefox中直接通過(guò)樣式定義width是無(wú)效的，需要用size設(shè)置file寬度；
4.IE6可用JS為button綁定file表單的點(diǎn)擊事件，此處不詳述。

另，本文提供的是一種主體思路，你可以在此思路上做進(jìn)一步的美化擴(kuò)展，比如加背景圖片文字樣式等等。