中山php|最優(yōu)網(wǎng)絡(luò) ：中山做網(wǎng)站 中山php建站
最優(yōu)良人
Posts Tagged With: file表單
修改file表單按鈕樣式，把文字：瀏覽..修改成自己喜歡的樣式或其他文字
2011/08/14 at 02:48 » Comments (277)
由于file類型的表單會(huì)自動(dòng)生成一個(gè)文字為瀏覽..的按鈕，并且這個(gè)按鈕的文字不能改變，如果我想改變這個(gè)file input框的表現(xiàn)形式或者希望改變這個(gè)按鈕的文字應(yīng)該怎么辦呢？ 我首先想到的，也是最簡(jiǎn)單的方式就是把這個(gè)file input框隱藏，然后建多一個(gè)按鈕，點(diǎn)擊按鈕的時(shí)候觸動(dòng)file 的click事件，這個(gè)方式再ie下可以，在火狐下就沒(méi)效果。 另外幾種種比較常用的方式就可以解決瀏覽器兼容的問(wèn)題，下面這種算是比較完美的解決方式，也是最簡(jiǎn)單的了。 就是先把這個(gè)file框透明，然后把它放在a標(biāo)簽里面，定義a標(biāo)簽的背景樣式，這樣看到的是a，點(diǎn)擊的是file，下面是代碼： <HTML> <HEAD> <TITLE>upload</TITLE> <style> .a { cursor:hand; text-decoration:none; background-image: url('http://cn.madeinasia.com/templets/default/images/logo.gif'); height:20px; width:20px; padding:0px; } .file { cursor:pointer; font-size:20px; left:0px; opacity:0; filter:alpha(opacity=0) } </style> </HEAD> <BODY> <FORM METHOD=POST ACTION="" enctype="multipart/form-data"> <A class='a' href=#><INPUT class='file' type=file size=1 name="filedata" onchange="this.form.submit()"></A> <INPUT TYPE="submit" value="提交"> </FORM> </BODY> </HTML> more »返回菜單
