input[type=”file”]の見た目を変更して選択ファイル名の表示やクリアにも対応させる方法

<input type="file" name="file">

<label>
  <input type="file" name="file" class="js-upload-file">ファイルを選択
</label>
<div class="js-upload-filename">ファイルが未選択です</div>
<div class="fileclear js-upload-fileclear">選択ファイルをクリア</div>

input[type="file"] {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}

label {
  padding: 10px 25px;
  margin: 0 0 10px;
  background: #aaa;
  color: #fff;
  display: inline-block;
  cursor: pointer;
}

.fileclear {
  display: none;
  margin: 10px 0 0;
  text-decoration: underline;
  font-weight: bold;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
  $('.js-upload-file').on('change', function () { //ファイルが選択されたら
    var file = $(this).prop('files')[0]; //ファイルの情報を代入(file.name=ファイル名/file.size=ファイルサイズ/file.type=ファイルタイプ)
    $('.js-upload-filename').text(file.name); //ファイル名を出力
  });
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
  $('.js-upload-file').on('change', function () { //ファイルが選択されたら
    let file = $(this).prop('files')[0]; //ファイルの情報を代入(file.name=ファイル名/file.size=ファイルサイズ/file.type=ファイルタイプ)
    $('.js-upload-filename').text(file.name); //ファイル名を出力
    $('.js-upload-fileclear').show(); //クリアボタンを表示
  });
  $('.js-upload-fileclear').click(function() { //クリアボタンがクリックされたら
    $('.js-upload-file').val(''); //inputをリセット
    $('.js-upload-filename').text('ファイルが未選択です'); //ファイル名をリセット
    $(this).hide(); //クリアボタンを非表示
  });
});
</script>