用css alpha 濾鏡 實作input file 樣式美化程式碼_經驗交流
- PHP中文网原創
- 2016-05-16 12:06:341680瀏覽
用css alpha 濾鏡實作input file 樣式美化程式碼_經驗交流
在web上傳檔案時，要用到上傳框：
<input type="file" id="f" name="f">
就算你將 f 的onclick句柄賦給某個對象，如：
<input type="file" id="f" name="f">
你 「點選」 後，同樣會彈出文件選擇對話框，可惜失望地：你照樣不能上傳文件！ 怎麼辦呢？ 看下這段：
<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了！ ！
<style>
input{border:1px solid green;}
</style>
<body>
<form method="post" action="" enctype="multipart/form-data">
<input type="text" id="txt" name="txt">
<input type="button" onmousemove="f.style.pixelleft=event.x-60;f.style.pixeltop=this.offsettop;"
value="请选择文件" size="30">
<input type="file" id="f" name="f" style="position:absolute;" size="1" onchange="txt.value=this.value">
<input type="submit">
</form>
</body>為了達到真正模擬的效果，還得要把f給隱藏，加個不透明的alpha 濾鏡即可，再加上 hidefocus 屬性，隱藏f的虛線：
<style>
input{border:1px solid green;}
</style>
<BODY>
<form method="post" action="" enctype="multipart/form-data">
<input type="text" id="txt" name="txt">
<input type="button" onmousemove="f.style.pixelLeft=event.x-60;f.style.pixelTop=this.offsetTop;"
value="请选择文件" size="30" onclick="f.click()">
<input type="file" id="f" onchange="txt.value=this.value" name="f"
style="position:absolute;filter:alpha(opacity=0);" size="1" hidefocus>
<INPUT TYPE="submit">
</form>
</BODY>可以看下opacity=0改為稍大些的效果。
ok了，現在你就可以控制它們的樣式、位置了。 。 。
以上就是用css alpha 濾鏡 實作input file 樣式美化程式碼_經驗交流的內容，更多相關內容請關注php中文網（www.php.cn）！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn