Labeling file upload button

Question

How can I internationalize the button text of the file picker? For example, what this code presents to the user:

 <input type="file" .../> 

Answer 1

It is normally provided by the browser and hard to change, so the only way around it will be a CSS/JavaScript hack,

See the following links for some approaches:

• http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
• http://www.quirksmode.org/dom/inputfile.html
• http://www.dreamincode.net/forums/showtopic15621.htm

Answer 2

Pure CSS solution:

.inputfile {    /* visibility: hidden etc. wont work */    width: 0.1px;    height: 0.1px;    opacity: 0;    overflow: hidden;    position: absolute;    z-index: -1;  }  .inputfile:focus + label {    /* keyboard navigation */    outline: 1px dotted #000;    outline: -webkit-focus-ring-color auto 5px;  }  .inputfile + label * {    pointer-events: none;  }

<input type="file" name="file" id="file" class="inputfile">  <label for="file">Choose a file (Click me)</label>

source: http://tympanus.net/codrops