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