How to hide text field in Html File Upload

The easiest way as not mentioned in any answer would be to use a label for the input.

<input type="file" name="myFile" id="myFile">
<label for="myFile">Choose your file</label>

input[type="file"] { display: none; }

Using label will be useful because clicking on the label is clicking on the input. This will only work when input's id is equal to label's for attribute.

I'd recommend hiding the whole thing and putting a separate button object which, when clicked, will end up clicking the input's browse button.

You can do this with CSS and javascript -- check out this article (actually the second time I've used this reference today).

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();" />