How to rename HTML browse button of an input type file

Question

How to rename the browse button as  Select the file   E g     lt input type file name browse  gt

User · Answer

No  you can t change file upload input s text  But there are some tricks to overlay an image over the button

User · Answer

The input type  file  field is very tricky because it behaves differently on every browser  it can t be styled  or can be styled a little  depending on the browser again  and it is difficult to resize  depending on the browser again  it may have a minimal size that can t be overwritten    There are workarounds though  The best one is in my opinion this one  the result is here

User · Answer

A bit of JavaScript will take care of it    lt script language  JavaScript  type  text javascript  gt  function HandleBrowseClick         var fileinput   document getElementById  browse        fileinput click        var textinput   document getElementById  filename        textinput value   fileinput value     lt  script gt    lt input type  file  id  browse  name  fileupload  style  display  none   gt   lt input type  text  id  filename  readonly  true   gt   lt input type  button  value  Click to select file  id  fakeBrowse  onclick  HandleBrowseClick      gt    Not the nicest looking solution  but it works

User · Answer

You can do it with a simple css jq workaround   Create a fake button which triggers the browse button that is hidden    HTML   lt input type  file   gt   lt button gt Open lt  button gt    CSS   input   display  none     jQuery      button    click  function e        e preventDefault       prevents submitting         input    trigger   click            demo

User · Answer

The button isn t called the  browse button      that s just the name your browser gives for it  Browsers are free to implement the file upload control however they like  In Safari  for example  it s called  Choose File  and it s on the opposite side of whatever you re probably using   You can implement a custom look for the upload control using the technique outlined on QuirksMode  but that goes beyond just changing the button s text

User · Answer

AFAIK you cannot change the button text  it is hard coded in the browsers   But there are several workarounds to put a button with diferent text image on a form   link

User · Answer

Wrap the  lt input type  file  gt  with a  lt label gt  tag  Add a tag  with the text that you need  inside the label  like a  lt span gt  or  lt a gt   Make this tag look like a button  Make input type  file   invisible via display  none

User · Answer

Here is the best  simple  short and clean way to  rename  the text of an input with file type and without JQuery  with pure HTML and javascript    lt input id  browse  type  file  style  width 0px  gt   lt button id  browser  onclick  browse click    gt       The text you want   lt  button gt

User · Answer

You can also use Uploadify  which is a great jQuery upload plugin  it let s you upload multiple files  and also style the file fields easily  http   www uploadify com

User · Answer

lt script language  JavaScript  type  text javascript  gt  function HandleBrowseClick         var fileinput   document getElementById  browse        fileinput click      function Handlechange     var fileinput   document getElementById  browse    var textinput   document getElementById  filename    textinput value   fileinput value     lt  script gt    lt input type  file  id  browse  name  fileupload  style  display  none  onChange  Handlechange      gt   lt input type  text  id  filename  readonly  true   gt   lt input type  button  value  Click to select file  id  fakeBrowse  onclick  HandleBrowseClick      gt    http   jsfiddle net J8ekg

[html] How to rename HTML "browse" button of an input type=file?

Examples related to html