用css alpha 濾鏡 實(shí)現(xiàn)input file 樣式美化代碼
在WEB上傳文件時(shí),要用到上傳框:
<input type="file" id="f" name="f">
這東東在IE(其他偶沒(méi)經(jīng)過(guò)測(cè)試)中是一個(gè)非常特殊的對(duì)象。 如果是您手動(dòng)寫入的或其他對(duì)象經(jīng)過(guò)某些事件觸發(fā)填入的值 ,由于安全問(wèn)題,在進(jìn)行提交表單時(shí),往往會(huì)被清空,所以上傳失敗。 簡(jiǎn)單點(diǎn)說(shuō),除非你的鼠標(biāo)親自點(diǎn)到了上傳框f上,IE才會(huì)給你上傳文件!
哪怕你將 f 的onclick句柄賦給某個(gè)對(duì)象,如:
<input type="file" id="f" name="f">
<input onclick="f.click()" value="點(diǎn)擊">
你 “點(diǎn)擊” 后,同樣會(huì)彈出文件選擇對(duì)話框,可惜失望地:你照樣不能上傳文件! 怎么辦呢? 看下這段:
<BODY onmousemove="f.style.pixelLeft=event.x-200;f.style.pixelTop=event.y-10;">
<input type="text"><input type="button" onmousemove="">
<input type="file" id="f" name="f" style="position:absolute;">
</BODY>
隨便點(diǎn)擊鼠標(biāo),看到效果了吧? 基于上面的思路,偶們就可以把它弄到一個(gè)button下面就OK了!!
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
為了達(dá)到真正模擬的效果,還得要把f給隱藏,加個(gè)不透明的alpha 濾鏡即可,再加上 hidefocus 屬性,隱藏f的虛線:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
可以看下opacity=0改為稍大些的效果。
OK了,現(xiàn)在你就可以控制它們的樣式、位置了。。。
相關(guān)文章
css下margin、padding、border、background和font縮寫示例
CSS代碼簡(jiǎn)化在工作中是非常有益的,也是必要的。在編寫CSS代碼時(shí),經(jīng)常會(huì)出現(xiàn)冗余的代碼,為了提高代碼的質(zhì)量及文件壓縮到最小,使代碼具有可讀性,不得不把CSS代碼簡(jiǎn)化。2008-06-06給自己的網(wǎng)站制作一個(gè)favicon.ico圖標(biāo)的實(shí)現(xiàn)方法
給自己的網(wǎng)站制作一個(gè)favicon.ico圖標(biāo)的實(shí)現(xiàn)方法...2007-03-03web標(biāo)準(zhǔn)常見(jiàn)問(wèn)題集合4
web標(biāo)準(zhǔn)常見(jiàn)問(wèn)題集合4...2006-12-12CSS expression控制圖片自動(dòng)縮放效果代碼[兼容 IE,Firefox]
一直以來(lái)有個(gè)很頭疼的問(wèn)題困擾著我,那就是圖片縮放的問(wèn)題,寫到 JS 里面吧,不太容易修改。寫到 CSS 里面吧,IE 6 又不支持 max-width2008-09-09《CSS3實(shí)戰(zhàn)》筆記--漸變?cè)O(shè)計(jì)(二)
這篇文章主要介紹了《CSS3實(shí)戰(zhàn)》筆記--漸變?cè)O(shè)計(jì)(二,需要的朋友可以參考下2016-05-05web標(biāo)準(zhǔn)知識(shí)——用途相似的標(biāo)簽
在XHTML標(biāo)簽中有一些標(biāo)簽的作用是相似的,當(dāng)然這里的相似是指語(yǔ)義相似,以至于很多人都不清楚這些相似的標(biāo)簽如何使用,那么今天的主題就是分解相似的標(biāo)簽,明確各個(gè)標(biāo)簽的用途。2008-06-06網(wǎng)頁(yè)設(shè)計(jì)布局基礎(chǔ)
網(wǎng)頁(yè)設(shè)計(jì)布局基礎(chǔ)...2007-02-02