隐藏按钮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>