1

How to Hide choose file button inside the text box, As I am using another button to browse.

If I give type="File", the button "choose file" automatically come inside my text box. Code below:

 <div class="col-lg-6">
    <label>Select File</label>
    <input  type="file"  id="SelectFile" @*style="display: none;"*@ class="form-control  input-sm input-small input-inline" />
</div>
 <div class="btn-group">
     <button id="btnBrowse" name="btnBrowse" onclick="document.getElementById('SelectFile').click();"  class="btn btn-block btn-primary btn-flat"><span class="hide-on-mobile">Browse </span><i class="fa fa-search"></i></button>
 </div>

Image with Choose File button

I tried giving *style="display: none;"*, this makes my textbox invisible.

Image after apply style none:

eisbehr
  • 12,243
  • 7
  • 38
  • 63
NewCoder
  • 11
  • 3

3 Answers3

0

Here what you can do is remove the classes from input file and add those to your label and then add the 'hidden' or display:none property to the file input

 <div class="col-lg-6">
    <label class="form-control  input-sm input-small input-inline" >Select File</label>
    <input  type="file" hidden  id="SelectFile"  />
</div>
Tony Manuel
  • 59
  • 6
0

This is the default behavior from the browsers. If still you want to change this, you can do this as well. Please refer, from this link

Muthu Krishnan
  • 1,664
  • 2
  • 10
  • 15
  • I referred those answers, but couldnt get proper answer, so what I asked in separate question sir... – NewCoder Sep 13 '19 at 12:11
-1

I think your question is duplicate; How to remove “Choose File” button from the textbox?

However, in your CSS, you can try something like that;

#SelectFile {
  padding: 36px 0 0 0;
}
hussam
  • 174
  • 1
  • 10
  • sir, ur one removed my choose file button from text box, but after choose file using using browse button, it never pass file name to my text box.. – NewCoder Sep 13 '19 at 12:08
  • One way to achieve what you're trying to do is wrapping the two divs inside one div and make the position of that div relative, and the position of the button div absolute. Then you can adjust the position of the button as you want. You can check this codepen link and tell me if it does what you want so I can update my answer. https://codepen.io/hussamhassan/pen/aboKjPK – hussam Sep 13 '19 at 13:36