HTML: Change text of button for INPUT of "FILE" type

There is known lack of flexibility in case if using INPUT html tag with FILE type. In this case browser will create a text field and button with "Browse..." label. There is no attribute which can change label text of button from "Browse..." to anything else.

Often it's needed while performing L10N for web application.

But there is one trick, which helps to solve this problem. You can imitate behavior of INPUT of FILE in next way:


<div style="width: 400px;">
   <input id="fileText" type="text" style="width: 270px; height: 23px; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;" disabled />
   <div style="width: 120px; height: 30px; overflow: hidden; position: relative; top: -25px; left:280px;">
         <button style="width: 110px; height: 25px; position: relative; top: 0px; left: 0px;"><span style="font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;"><%= helper.getMessage("label.browse")%></span></button>
         <input type="file" name="file" id="upload.fileName" style="font-size: 50px; width: 120px; opacity: 0; filter:alpha(opacity: 0); position: relative; top: -40px; left: -10px; cursor:pointer; cursor:hand;" onchange="document.getElementById('fileText').value=this.value;" />
   </div>
</div>

Main idea here is to use opacity for File Input and relative positioning to place it over imitation.

Here is ordinary File Input:



And here is custom one: