How to hide default choose file button

Question

How can I hide the default choose file button ?

Here is my html:

<div class="col-md-4">                           
    <span class="btn btn-info "><i class="glyphicon glyphicon-plus"> </i> Browse
        <input type="file" style="position:relative;overflow:hidden" id="inPutArtistImage" name="ArtistImage" accept="image/png, image/jpeg" />
    </span>
</div>

The button is styled nicely with bootsrap button info colors and the plus icon.

I simply cannot get rid of the grey "Choose file" button. Any help is appreciated.

I have tried every solution on StackOverflow

Answer 1

Simple. Give the input enough padding-top so that it hides. Do not forget to do the box-sizing thing!!

input#file {
  display: inline-block;
  width: 100%;
  padding: 120px 0 0 0;
  height: 100px;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698394-icon-130-cloud-upload-512.png') center center no-repeat #e4e4e4;
  border-radius: 20px;
  background-size: 60px 60px;
}

<form>
  <input id="file" type="file" />
</form>

Answer 2

UPDATE 2021

You can use

::-webkit-file-upload-button {
   display: none;
}

I found another solution that works even in non-WebKit browsers

::file-selector-button {
  display: none;
}

It hides the "choose file" button but the file name is still visible. If you also want to hide the file name, just target the whole input with display:none