html - 将输入文件隐藏在按钮中 Semantic-UI

Question

有没有办法使用 Semantic-ui 来完成这项工作？

我有这个按钮，看起来不错，但输入文件永远不会被调用。

<div class="ui icon big button">
        <i class="cloud icon"></i>
        <input type="file" id="hidde-new-file" style="display: none">
 </div>

Answer 1

我建议添加一个指向隐藏输入的标签。单击标签时会触发其输入。全原生无JS。

<div>
  <label for="hidden-new-file" class="ui icon button">
    <i class="cloud icon"></i>
    Open File
  </label>
  <input type="file" id="hidden-new-file" style="display: none">
</div>