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