22

I want to change the default value of <input type="file" /> from “Choose file” to “Browse”. How to do that?

Lumen
  • 3,554
  • 2
  • 20
  • 33
user634850
  • 515
  • 2
  • 8
  • 16
  • Good question, I am stunned this has to be asked, and that none of the solutions are simple – PandaWood Oct 28 '14 at 02:40
  • Webkit browsers use the choose file terms. The solutions below are simple for this problem. Using JS to simulate a button click is a very common solution web developers use, allowing them to lay out a page as the designer intended and be visually similar across browsers. – CarComp Mar 23 '15 at 15:34
  • Possible duplicate of [How to change the button text of ?](https://stackoverflow.com/questions/1944267/how-to-change-the-button-text-of-input-type-file) – Bae Aug 04 '17 at 00:03

3 Answers3

25

Hide it and use a other control to trigger it. 

<a href="#" onclick="document.getElementById('fileID').click(); return false;" />Browse</a>
<input type="file" id="fileID" style="visibility: hidden;" />
fubo
  • 44,811
  • 17
  • 103
  • 137
  • 1
    I used this solution but styled it as a button using bootstrap and also added display:none so as to not add extra space for the input control. `Browse ` – CarComp Mar 23 '15 at 15:21
6

I created a jsFiddle to show how, you can find it here: Custom browse button

dalvarezmartinez1
  • 1,385
  • 1
  • 17
  • 26
3

Here is another solution; hiding file-type input field (button) and placing another regular button-type input field (button) which allows one to change its content - triggering first file button (lower one) is done with JavaScript clicking on second regular button (upper one).

→ Howto Style the Button of a input type="file" Control

sbrbot
  • 6,169
  • 6
  • 43
  • 74
  • It seems as if in all the comments here, there is no simple easy way to change the default value. – shevy Jan 27 '14 at 19:55