Gunakan penapis css alpha untuk melaksanakan kod pengindahan gaya fail input_Pertukaran pengalaman-tutorial css-php.cn

Gunakan penapis css alpha untuk melaksanakan kod pengindahan gaya fail input_Pertukaran pengalaman

PHP中文网

Lepaskan： 2016-05-16 12:06:34

asal

1727 orang telah melayarinya

Gunakan penapis css alpha untuk melaksanakan kod pengindahan gaya fail input_Pertukaran pengalaman

Apabila memuat naik fail di WEB, anda perlu menggunakan kotak muat naik:

<input type="file" id="f" name="f">

Salin selepas log masuk

Walaupun anda menetapkan pemegang onclick f pada objek, seperti:

<input type="file" id="f" name="f">

Salin selepas log masuk

Selepas anda "klik", kotak dialog pemilihan fail juga akan muncul Malangnya, anda kecewa: anda masih tidak boleh memuat naik fail! Apa yang perlu dilakukan? Lihat perenggan ini:

<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>

Salin selepas log masuk

Klik tetikus dan lihat kesannya? Berdasarkan idea di atas, kita hanya boleh meletakkannya di bawah butang dan itu sahaja! !

<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>

Salin selepas log masuk

Untuk mencapai kesan simulasi sebenar, anda perlu menyembunyikan f, menambah penapis alfa legap dan menambah atribut hidefocus untuk menyembunyikan Garis putus-putus 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>

Salin selepas log masuk

Anda boleh melihat kesan menukar kelegapan=0 kepada lebih besar sedikit.

OK, kini anda boleh mengawal gaya dan kedudukan mereka. . .

Di atas adalah kandungan menggunakan penapis css alpha untuk merealisasikan pertukaran kod_pengalaman gaya fail input Untuk kandungan yang lebih berkaitan, sila perhatikan laman web PHP Cina (www.php.cn)!