是否有一种方法可以放置输入类型＆＃x27; file＆＃x27;单击图标

Question

是否有任何方法将输入类型='file'放在我的代码示例中已有下载的SVG图标上。 我正在使用尾风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

将＆lt; input＆gt;和＆lt; img＆gt;放入＆lt; label＆gt;中。单击图像将与单击输入元素相同。然后隐藏＆lt; input＆gt;。

.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>