如何隐藏输入文件并将input=“文件”样式化为图标/图像

<style>
  .file-input {
    position: relative;
    display: inline-block;
    cursor: pointer;
    background-image: url("icon.png"); /* 替换为自己的图标/图像路径 */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 24px;
    height: 24px;
    overflow: hidden;
  }

  .file-input input[type="file"] {
    position: absolute;
    left: -9999px;
    /* 设置透明度或尺寸为0 */
    opacity: 0;
    /* width: 0; */
    /* height: 0; */
  }
</style>

<div class="file-input">
  <input type="file">
</div>