Home >Web Front-end >CSS Tutorial >Use css alpha filter to implement input file style beautification code_Experience exchange
Use css alpha filter to implement input file style beautification code_Experience exchange
- PHP中文网Original
- 2016-05-16 12:06:341730browse
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">
even if you assign the onclick handle of f to an object, such as:
<input type="file" id="f" name="f">
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>
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>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>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)!