Styling an Input Type="File" Button

input[type='file'] {
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<label>
  <input id="Image" type="file" class="form-control-image"         name="image_reference">
  <span class="btn btn-primary">File button</span>
</label>
<br />
<br />
<button class="btn btn-primary form-control-image">Submit</button>

How to style a “choose file” button using CSS only

File type is a native element henceforth you cant change it's appearance. Instead you can hide at the back of some element.

<div>
  Choose File
 <input type="file" class="hide_file">
</div>

 div{
  padding:5px 10px;
  background:#00ad2d;
  border:1px solid #00ad2d;
  position:relative;
  color:#fff;
  border-radius:2px;
  text-align:center;
  float:left;
  cursor:pointer
}
.hide_file {
    position: absolute;
    z-index: 1000;
    opacity: 0;
    cursor: pointer;
    right: 0;
    top: 0;
    height: 100%;
    font-size: 24px;
    width: 100%;
}

Refer Here

Hide choose file button of input[type='file'] without hiding file choosen name with simple css

Here you can easily remove choose file button of input type file without losing filename label with just simple CSS.

input[type=file]::-webkit-file-upload-button {
    visibility: hidden;
}

How to customize input type=file?

You can’t modify much about the input[type=file] control itself.

Since clicking a label element correctly paired with an input will activate/focus it, we can use a label to trigger the OS browse dialog.

Here is how you can do it…

label {   cursor: pointer;   /* Style as you please, it will become the visible UI component. */}
#upload-photo {   opacity: 0;   position: absolute;   z-index: -1;}

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

document.getElementById("customButton").addEventListener("click", function(){  document.getElementById("fileUpload").click();  // trigger the click of actual file upload button});
document.getElementById("fileUpload").addEventListener("change", function(){  var fullPath = this.value; // fetched value = C:\fakepath\fileName.extension  var fileName = fullPath.split(/(\\|\/)/g).pop();  // fetch the file name  document.getElementById("fileName").innerHTML = fileName;  // display the file name}, false);

#fileUpload{  display: none; /* do not display the actual file upload button */}
#customButton{  /* style the fake upload button */  background: yellow;  border: 1px solid red;}

<div>  <input type="file" id="fileUpload"> <!-- actual file upload button -->  <button id="customButton">My Custom Button</button>  <!-- fake file upload button which can be used for styling ;) -->  <span id="fileName"></span></div>

.hide-if-value input[type=file]::file-selector-button {
  color: red;
}

<div class="hide-if-value">
  <label class="acf-basic-uploader">
            <input type="file" name="acf[field_60bc599999c5]" id="acf-field_60bc599999c5">
      </label>
</div>

 <div>
     <label onChange={handleFile} htmlFor="formId">
         <input name="" type="file" id="formId" hidden />
          <Icon>
     </label>
 </div>

 <input id="txt" type = "text" value = "Choose File" 
       onclick ="javascript:document.getElementById('file').click();">
      <input id = "file" type="file" style='visibility: hidden;' name="img" onchange="ChangeText(this, 'txt');"/>



function ChangeText(oFileInput, sTargetID) {

    document.getElementById(sTargetID).value = oFileInput.value;
}