在WEB上傳檔案時，要用到上傳框：
<input type="file" id="f" name="f">
哪怕你將 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了！！
<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 樣式美化代碼_經驗交流的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
