css - How to hide text field in Html File Upload

Question

I am wondering how to hide the text field portion of a standard html file upload tag

for example

<input type="file" name="somename" size="chars"> 

This generates obviously a text field and next to that field is a browse button... I want to hide the text field part but keep the button.

Answer 1

This will surely work i have used it in my projects.I hope this helps :)

<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />