Label doesn't work

Question

I have this code:

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

The problem is when I click choose file nothing happens.

Answer 1

Change your button like <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>