Edgeのinput type=”file”のスタイルをIEのスタイルにしてみた

Microsoft Edge(以下Edge)やその他のブラウザでは、<input type="file">をすると以下のようなデザインになります。

ちなみにInternetExploer(以下IE)では、以下のようなデザインになります。(以下はIEモードで開いています。)

今回は、EdgeでIEのようなスタイルに変更したいと思います。

Microsoft Edgeのバージョンは、120.0.2210.91となります。

ソースコード

<!DOCTYPE html>
<html>
  <head>
    <title>TEST</title>
    <style>
      label {
        display: inline-block;
        height: 20px;
        vertical-align: middle;
      }
      input[type="text"] {
        background-color: #ebebeb;
        border: solid #c7c6c6 1px;
        outline: none;
        height: 100%;
        box-sizing: border-box;
      }
      input[type="file"]{
        display: none;
      }
      p {
        cursor: pointer; 
        padding: 1px 10px;
        font-size: small;
        background-color: #ebebeb; 
        border: solid 1px #b7b7b7; 
        display: inline-block;
        height: 100%;
        box-sizing: border-box;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <label for="file">
      <input id="file_name" type="text"  readonly="readonly"><p>参照...</p>
      <input id="file" type="file">
    </label>
    <script> 
      const fileName = document.getElementById("file_name");
      const fileInput = document.getElementById("file");
      fileInput.addEventListener("change", () => {
        fileName.value = fileInput.value;
      });
    </script>
  </body>
</html>