Another straight to the point solutionStyling <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.
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>