How to style HTML file upload with CSS?
Another straight to the point solution
Styling <input type="file"> is problematic, because most of the browsers don't apply any styling to it.But there is a nice hack, which works in major browser (including Firefox and Internet Explorer).
You just need to place a span, and in that space- nice looking text field which will imitate upload field and then the right upload field, but with opacity = 0. When your user will click on the text field we will actually click on the upload field which is invisible but placed on top of the input field. An a browser dialog box will appear.
You can can just copy the chosen file name to your input field with JavaScript.
Here's a sample code to do the above:
<form>
<span style="position: relative">
<span style="position:absolute; top:0; left:0; width:100px; filter:alpha(opacity=0); opacity:0.0; overflow:hidden">
<input type="file" name=excel onpropertychange="fake_upload.value=this.value" style="height:28px;width:100px;cursor:hand;">
</span>
<input type="text" name="fake_upload" style="width: 100px">
</span>
</form>
Comments