您的位置:首頁 > 網絡資訊 > 網頁設計

新聞詳細

利用label標簽和CSS美化文件上傳表單
2011-05-26 來源:思派網絡 [ ]

文件上傳類型表單<input type=”file” />是一個讓很多前端開發者糾結過的表單類型,因為它是一個無法單純用CSS給它定義兼容的樣式。上周的工作中有個批量上傳圖片的頁麵,又遇到了這個問題。於是,今天把我的解決方案奉獻給大家:利用label標簽與CSS共同打造一個樣式可控的並兼容IE6之外主流瀏覽器的上傳表單。

利用LABEL與CSS美化文件上傳表單

首先,手机赌博要新增一個與file相冊大小的button按鈕,然後利用label為初始的file類型表單定義標注(關於label的解釋與用法,此處不詳解,不了解的請自行查閱HTML手冊)。如此一來,一個可以觸發選擇文件表單的按鈕就出來了。接下來,相信很多人都知道怎麽做了。

有了一個可以觸發file表單的按鈕,隻要通過絕對定位將file表單從文檔流中拖出,然後用z-index屬性將它的層級提升到比button按鈕高,同時將file表單的透明度置為0,這樣一來,file表單就正好覆蓋在button按鈕上了,並且可觸發選擇文件表單。此處有一點需要說明,FireFox中是無法通過width來設定寬度值的,所以需要用input的size值來設定file表單寬度值。

最後,附上樣例中的成型代碼:

HTML代碼:

 

<DIV class=btns>
<INPUT id=input_file_molding class=btn_file_molding size=6 type=file>
 <LABEL for=input_file_molding>
<INPUT value=http://www.chinaainuo.com/Design/Pages/添加照片 type=button></LABEL>
</DIV>

CSS代碼:

 

.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*/

幾個注意的細節:

1.file表單與button按鈕的高寬一定要相同;

2.因各瀏覽器對file表單的表現不一致,其邊框一定要隱藏掉,以免出現各瀏覽器不兼容問題;

3.firefox中直接通過樣式定義width是無效的,需要用size設置file寬度;

4.IE6可用JS為button綁定file表單的點擊事件,此處不詳述。

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