html - 标签不起作用

Question

我有这个代码:

.hidden_element {
  height: 1px;
  width: 1px;
  overflow: hidden;
}

<form action="">
  <label for="file">
    <button type="button" class="button red">Choose File</button>
  </label>
  <div class="hidden_element">
    <input type="file" name="video" id="file" />
  </div>
</form>

问题是当我点击选择文件时没有任何反应。

Answer 1

把你的按钮改成<button type="button" onclick="document.getElementById('file').click()" class="button red">Choose File</button>

.hidden_element {
  height: 1px;
  width: 1px;
  overflow: hidden;
}

<form action="">
  <label for="file">
    <button type="button" onclick="document.getElementById('file').click()" class="button red">Choose File</button>
  </label>
  <div class="hidden_element">
    <input type="file" name="video" id="file" />
  </div>
</form>