How to hide File Browse button in HTML?

Hide the file browse button

---

download image below:


Now use following HTML code:

User following Stylesheet:
input.hidden {
opacity:0;
position:relative;
text-align:left;
filter:alpha(opacity=0);
}

<div
style=" overflow: hidden; width: 70px; height: 28px; position: absolute; direction: rtl; ">
<img src="btn_add.gif" style="z-index: 2;"/>
<input type="file" style="cursor: pointer; z-index: 3; position: absolute; top: 0px; left:0px;"
class="hidden" value="" name="file1" id="file1"/>
</div>

and now u can see than on clicking on add button image it will open File Upload Dialog box.

It's due to we jst put Browse button on top of Add Image button as transparent image.

Try this code......

good luck...