How to customize appearance of input type=“file”?

Yes we can customize as following:

Html

<div class="fileinputs">
 <input type="file" class="file" />
 <div class="fakefile">
  <img src="search.gif" />
 </div>
</div>

div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}

You can’t modify much about the input[type=file] control itself but we can use label to customize it. Since a label element correctly paired with an input will activate/focus it.

<label id="file-upload-label" for="file-upload">Browse...</label>
<input type="file" name="file-upload" id="file-upload" />

Here is basic CSS:

label {
   cursor: pointer;
   /* Style as you want, it will become the visible. */
}

#file-upload {
   opacity: 0;
   position: absolute;
   z-index: -1;
   display:none;
}

We can use image icon as:

label {
   cursor: pointer;
    background-image: url('../images/file-upload.png');
    background-repeat: no-repeat;
    background-position: center;
    color: transparent;
    vertical-align: top;
    display: -webkit-inline-box;
    background-size: contain;
    height: 33px;
}

#file-upload {
   opacity: 0;
   position: absolute;
   z-index: -1;
   display:none;
}

The best trick, just use a <label>, hide the <input>, and customize the label.

HTML:

<input type="file" id="input-file">
<label for="input-file" id="label-file">Choose File</label>

CSS:

#input-file
{
  display: none;
}
#label-file
{
  /* Customize your label here */
}