<label>
  <input class="file_real" type="file" accept="image/jpg, image/png, image/gif">
  <input class="file_fake" type="text" placeholder="*.jpg/png/gif Only" readonly tabindex="-1">

  <span class="button">Find</span>
</label>
body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: #f1f1f1
}

// attached input
label {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 400px;
  width: 100%;
  
  .file_real {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
  
  .file_fake {
    padding: 0 15px;
    width: 100%;
    height: 50px;
    border: 1px solid #ddd;
  }
  
  .button {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto 0;
    padding: 0 15px;
    height: 30px;
    font-size: 13px;
    color: #fff;
    background-color: #0d6efd;
  }
}
View Compiled
$('.file_real').on('change', function() {
  var files = $(this)[0].files[0]; // Get file name
  var fake = $('.file_fake');
  
  // If the user presses cancel, the input is empty.
  fake.val('');
  
  // If the user selects a file, the file name is displayed in the fake input.
  if ( files !== undefined ) {
    fake.val(files.name);
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js