CODEWITHSUNDEEP
javascripthtml
Joseph
Joseph

Reputation: 4715

Why `<button>` inside `<input type="file" />` won't trigger native file selector, but `<div>` is OK?

Please see this minimum example

.hidden {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  visibility: hidden;
}
<label for="inputFile">
  <input id="inputFile" class="hidden" type="file" />
  
  <div>Click Me Will Trigger Input Dialog</div>
</label>

<label for="inputFile2">
  <input id="inputFile2" class="hidden" type="file" />
  
  <button>Click Me Won't Trigger Input Dialog</button>
</label>

I have two <input type="file" /> wrapped in <label /> with explicity specify id attribute.

One has <div /> as a child, the other has <button /> as a child.

If I click the <div />, the native file picker shows up, however, if I click the <button />, nothing will happen.

Why is this happening?

Is it possible to use the <button /> tag but still make the native file picker show up?

Upvotes: 0

Views: 218

Answers (1)

kmp
kmp

Reputation: 802

button has it's own functionality while div doesn't. This is why it does not trigger when you click on the button (basically the button triggers on click, but since it's function doesn't do anything, nothing will happen. Fixable with javascript as well).

However, you could add pointer-events: none to that button. It revokes every mouse event - and will work just the same as div does.

button {
  pointer-events: none;
}

label[for=inputFile2] {
  display: inline-block;
}
label[for=inputFile2]:hover {
  background-color: #333132;
}

label[for=inputFile2] button {
  background: transparent;
  border: none;
}

label[for=inputFile2]:hover button {
  color: #fff;
}

.hidden {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  visibility: hidden;
}
<label for="inputFile">
  <input id="inputFile" class="hidden" type="file" />
  <div>Click Me Will Trigger Input Dialog</div>
</label>

<label for="inputFile2">
  <input id="inputFile2" class="hidden" type="file" />
  <button>Click Me Won't Trigger Input Dialog</button>
</label>

Upvotes: 2

Related Questions