Hide the browse button on a input type=file

Came across this question and didn't feel like any of the answers were clean. Here is my solution:

<label>
  <span>Select file</span>
  <input type="file" style="display: none">
</label>

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:

<label class="w3-button w3-blue w3-round">
    <span><i class="fas fa-image"></i></span>
    <input type="file" style="display: none" >
</label>

Of course you need to add an event listener to the input to detect a file was chosen.

HTML - InputFile component can be hide by writing some css. Here I am adding an icon which overrides inputfile component.

<label class="custom-file-upload">
    <InputFile OnChange="HandleFileSelected" />
    <i class="fa fa-cloud-upload"></i> Upload
</label>

css-

<style>
    input[type="file"] {
        display: none;
    }

    .custom-file-upload {
        border: 1px solid #ccc;
        display: inline-block;
        padding: 6px 12px;
        cursor: pointer;
    }
</style>

Just add negative text intent as so:

input[type=file] {
  text-indent: -120px;
}

before:

after:

the best way for it

<input type="file" id="file">
<label for="file" class="file-trigger">Click Me</label> 

And you can style your "label" element

#file { 
   display: none;
}
.file-trigger {
/* your style */
}