有没有办法将输入类型“文件”单击图标

Question

有没有什么方法可以将 input type='file' 放在 svg Icon 上，我在下面的代码示例中已经有了下载。我正在使用 Tailwind CSS。

 <td click.delegate="getTenantAgentLicence(agent.agentId)" class="p-6 pb-10 text-left block md:table-cell">
    <!-- <input type="file"/> -->
 <span class="inline-block md:hidden font-bold">Download</span>
    <a class="ml-2 cursor-pointer">
      <img class="h-6 w-6" src="/images/download1.svg">
    </a>
 </td>

Answer 1

将<input>和放入<img>a 内<label>。单击图像与单击输入元素相同。然后隐藏<input>.

.hidden {
  display: none;
}

<label>
  <input type="file" class="hidden" name="file1">
  <img class="h-6 w-6" alt="Image here" src="/images/download1.svg">
</label>