Hide the browse button on a input type file

Question

Is there a way to hide the browse button and only leave the text box that works in all browsers    I have tried setting the margins but they show up different in each browser

User · Answer

You may just without making the element hidden, simply make it transparent by making its opacity to 0.

Making the input file hidden will make it STOP working. So DON'T DO THAT..

Here you can find an example for a transparent Browse operation;

User · Answer

HTML - InputFile component can be hide by writing some css  Here I am adding an icon which overrides inputfile component   lt label class  quot custom-file-upload quot  gt       lt InputFile OnChange  quot HandleFileSelected quot    gt       lt i class  quot fa fa-cloud-upload quot  gt  lt  i gt  Upload  lt  label gt   css-  lt style gt      input type  quot file quot             display  none              custom-file-upload           border  1px solid  ccc          display  inline-block          padding  6px 12px          cursor  pointer         lt  style gt

User · Answer

No  what you can do is a  ugly  workaround  but largely used   Create a normal input and a image Create file input with opacity 0 When the user click on the image  you simulate a click on the file input When file input change  you pass it s value to the normal input  so user can see the path    Here you can see a full explanation  along with code   http   www quirksmode org dom inputfile html

User · Answer

So I found this solution that is very easy to implement and gives a very clean GUI  put this in your HTML   lt label class  att-each  gt  lt input type  file  gt  lt  label gt    and this in your CSS  label att-each   width  68px  height  68px  background  url  add-file png   no-repeat  text-indent  -9999px      add-file png can be any graphic you wish to show on the webpage  Clicking the graphic will launch the default file explorer   Working Example  http   www projectnaija com file-picker17 html

User · Answer

the best way for it  lt input type  quot file quot  id  quot file quot  gt   lt label for  quot file quot  class  quot file-trigger quot  gt Click Me lt  label gt    And you can style your  quot label quot  element  file       display  none     file-trigger      your style

User · Answer

Below code is very useful to hide default browse button and use custom instead    x000D   x000D   function      x000D       input type  file     bind  change   function     x000D          img text   html    input type  file     val     x000D        x000D     jQuery  x000D   file-input-wrapper   x000D    height  30px  x000D    margin  2px  x000D    overflow  hidden  x000D    position  relative  x000D    width  118px  x000D    background-color   fff  x000D    cursor  pointer  x000D    x000D   x000D   file-input-wrapper gt input type  file     x000D    font-size  40px  x000D    position  absolute  x000D    top  0  x000D    right  0  x000D    opacity  0  x000D    cursor  pointer  x000D    x000D   x000D   file-input-wrapper gt  btn-file-input   x000D    background-color   494949  x000D    border-radius  4px  x000D    color   fff  x000D    display  inline-block  x000D    height  34px  x000D    margin  0 0 0 -1px  x000D    padding-left  0  x000D    width  121px  x000D    cursor  pointer  x000D    x000D   x000D   file-input-wrapper hover gt  btn-file-input   x000D      background-color   494949  x000D    x000D   x000D   img text   x000D    float  right  x000D    margin-right  -80px  x000D    margin-top  -14px  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt body gt  x000D     lt div class  file-input-wrapper  gt  x000D       lt button class  btn-file-input  gt SELECT FILES lt  button gt  x000D       lt input type  file  name  image  id  image  value      gt  x000D     lt  div gt  x000D     lt span id  img text  gt  lt  span gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

Just an additional hint for avoiding too much JavaScript here  if you add a label and style it like the  browse button  you want to have  you could place it over the real browse button provided by the browser or hide the button somehow differently  By clicking the label the browser behavior is to open the dialog to browse for the file  don t forget to add the  for  attribute on the label with value of the id of the file input field to make this happen   That way you can customize the button in almost any way you want   In some cases  it might be necessary to add a second input field or text element to display the value of the file input and hide the input completely as described in other answers  Still the label would avoid to simulate the click on the text input button by JavaScript   BTW a similar hack can be used for customizing checkboxes or radiobuttons  by adding a label for them  clicking the label causes to select the checkbox radiobutton  The native checkbox radiobutton then can be hidden somewere and be replaced by a custom element

User · Answer

Just add negative text intent as so  input type file      text-indent  -120px     before   after

User · Answer

x000D   x000D           dropZoneOverlay   FileUpload   x000D              width  283px  x000D              height  71px  x000D            x000D   x000D           dropZoneOverlay   x000D              border  dotted 1px  x000D              font-family  cursive  x000D              color   7066fb  x000D              position  absolute  x000D              top  0px  x000D              text-align  center  x000D            x000D   x000D           FileUpload   x000D              opacity  0  x000D              position  relative  x000D              z-index  1  x000D            x000D           lt div class  dropZoneContainer  gt  x000D               lt input type  file  id  drop zone  class  FileUpload  accept   jpg  png  gif  onchange  handleFileSelect this      gt  x000D               lt div class  dropZoneOverlay  gt Drag and drop your image  lt br   gt or lt br   gt Click to add lt  div gt  x000D           lt  div gt  x000D   x000D   x000D    I find a good way of achieving this at Remove browse button from input file   The rationale behind this solution is that it creates a transparent input file control and creates an layer visible to the user below the file control  The z-index of the input file will be higher than the layer   With this  it appears that the layer is the file control itself  But actually when you clicks on it  the input file is the one clicked and the dialog for choosing file will appear

User · Answer

Oddly enough  this works for me  when I place inside a button tag      button       position  relative       input type file                color  transparent              background-color  transparent              position  absolute              left  0              width  100               height  100               top  0              opacity  0              z-index  100                Only tested in Chrome  macOS Sierra

User · Answer

Came across this question and didn t feel like any of the answers were clean  Here is my solution    lt label gt     lt span gt Select file lt  span gt     lt input type  file  style  display  none  gt   lt  label gt    When you click the label the select file dialog will open  No js needed to make it happen   You can style the label to look like a button   Here is an example using w3css and font awesome    lt label class  w3-button w3-blue w3-round  gt       lt span gt  lt i class  fas fa-image  gt  lt  i gt  lt  span gt       lt input type  file  style  display  none   gt   lt  label gt    Of course you need to add an event listener to the input to detect a file was chosen

[html] Hide the browse button on a input type=file

Examples related to html

Examples related to css