I want to customize my input type file button. For that I have put it inside a span and set its visibility to hidden.

     <span class="btn btn-default" flow-btn>
        Please choose a file
      <input type="file"style="visibility: hidden; position: absolute;"></span>

My problem is that when I click on the span, nothing happen, but when I remove the visibility: hidden from the style, then the choose file popup is displayed.

How can I get the same result as the input type="file" even if it's hidden?

  <span class="btn btn-default" flow-btn>
        Please choose a file
      <input type="file"style="visibility: hidden; position: absolute;"></span>

I want to customize my input type file button. For that I have put it inside a span and set its visibility to hidden.

     <span class="btn btn-default" flow-btn>
        Please choose a file
      <input type="file"style="visibility: hidden; position: absolute;"></span>

My problem is that when I click on the span, nothing happen, but when I remove the visibility: hidden from the style, then the choose file popup is displayed.

How can I get the same result as the input type="file" even if it's hidden?

  <span class="btn btn-default" flow-btn>
        Please choose a file
      <input type="file"style="visibility: hidden; position: absolute;"></span>

• javascript
• html
• css
• angular

• This seems like a much better way to accomplish what you want, customising the look of the Choose File button : stackoverflow.com/a/5813384/7852370 – Karl Reid Commented Apr 24, 2017 at 13:54
• ^ why not do what this guy said :) – Noobit Commented Apr 24, 2017 at 13:57

3 Answers 3

Use a <label> instead of a <span> with a "for" attribute targetting the <input>.

 <label for="file-input" class="btn btn-default" flow-btn>
    Please choose a file
  <input id="file-input" type="file"style="visibility: hidden; position: absolute;"></label>

doing it the angular way:

<span class="btn btn-default" flow-btn (click)="fInput.click()">Please choose a file</span>
<input #fInput type="file"style="visibility: hidden; position: absolute;" (change)="onFilesAdded($event)">

• create a local template variable for you hidden input called fInput
• add the click-event to your span and then click your hidden input
• add change-event to your file-input to handle files inside of your template

<span class="btn btn-default" flow-btn>
        Please choose a file
      <input type="file"style="display: none;"></span>

set the display to none (which hides it and does not reserve space for it) you won't need positioning either