Use CSS Alpha Filter to implement input file style beautification code _ Experience Exchange

Source: Internet
Author: User

When uploading files on the web, use the Upload box: 
<input type= "file"  id= "F"  name= "F" > 
         this stuff is a very special object in IE (other occasionally not tested).   If you write manually or other objects triggered by some event to fill the value  , because of security issues, in the submission form, often will be emptied, so upload failed.   simply say, unless your mouse point to the upload box on the F, IE will give you upload files!  

Even if you assign a  f  onclick handle to an object, such as: 
<input type= "file"  id= "F"  name= " F "> 
<input onclick=" F.click () " value=" click "> 
         you   "Click"  , the same will pop-up file selection dialog box, but disappointed: you can not upload files! What about  ?   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>
Click the mouse, see the effect of it?   Based on the above ideas, we can get it to a button under the OK!!

<style> input{border:1px Solid Green; </style> <BODY> <form method= "POST" action= "enctype=" Multipart/form-data "> <input type=" Tex T "id=" TXT "name=" txt "> <input type=" button "onmousemove=" f.style.pixelleft=event.x-60;f.style.pixeltop= This.offsettop "value=" Please select File "size=" > <input type= "file" id= "F" name= "F" size= "1" onchange= "txt.value= This.value "> <input type=" Submit "> </form> </BODY>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

To really simulate the effect, you have to hide F, add an opaque alpha filter, plus the Hidefocus attribute, hide F's dotted line:

<style> input{border:1px Solid Green; </style> <BODY> <form method= "POST" action= "enctype=" Multipart/form-data "> <input type=" Tex T "id=" TXT "name=" txt "> <input type=" button "onmousemove=" f.style.pixelleft=event.x-60;f.style.pixeltop= This.offsettop "value=" Please select File "size=" onclick= "F.click ()" > <input type= "file" id= "F" onchange= "txt.value=" This.value "name=" F "size=" 1 "hidefocus> <input type=" Submit "> </form> </BODY>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

You can look at the opacity=0 to slightly larger effect.

OK, now you can control their style, location ...

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.