Use css alpha filter to implement input file style beautification code

Use css alpha filter to implement input file style beautification code_Experience exchange

PHP中文网

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

Original

1729 people have browsed it

use css alpha filter to implement input file style beautification code_experience exchange

when uploading files on the web, you need to use the upload box:

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

Copy after login

even if you assign the onclick handle of f to an object, such as:

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

Copy after login

after you “click”, the file selection dialog box will also pop up. unfortunately, you are disappointed: you still cannot upload files! how to do it? look at this paragraph:

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

Copy after login

click the mouse and see the effect? based on the above idea, we can just put it under a button and that’s it! !

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

Copy after login

in order to achieve a true simulation effect, you have to hide f, add an opaque alpha filter, and add the hidefocus attribute. hide the dotted line of 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>

Copy after login

you can see the effect of changing opacity=0 to slightly larger.

ok, now you can control their style and position. . .

the above is the content of using css alpha filter to realize input file style beautification code_experience exchange. for more related content, please pay attention to the php chinese website (www.php.cn)!