Why does button block file selection?

Question

Why does it block you to select a file when you click on the button? If you put a span or div in the label, they allow you to select a file when you click on them, but the button does not

<html>
<body>
  <label>
    <input type="file">
    <button class="upload" type="button"></button>
  </label>
</body>

<style>
  label {
    display: block;
    width: 100px;
    height: 54px;

    background: green;
  }

  input {
    display: none;
  }

  .upload {
    background: gold;
    height: 100%;
  }
</style>

</html>

The `` is what's actually powering the upload, not the button. The button isn't really doing anything. Here's a pretty simple tutorial on how to style an upload button that may be of use: https://dev.to/faddalibrahim/how-to-create-a-custom-file-upload-button-using-html-css-and-javascript-1c03 but you're basically there with your label styling (the green box). See also: https://stackoverflow.com/questions/572768/styling-an-input-type-file-button — AStombaugh, May 09 '22 at 20:11

score 1 · Accepted Answer · answered May 09 '22 at 20:15

the problem is that the button is a separate element it is not related to the input even if you wrapped them in one label

so to work around that you need to remove the button and style the label instead

CSS

label {
    /* style the input here  */
    display: block;
    width: 100px;
    height: 54px;
    background: green;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    cursor: pointer;
    /* more style .... */
}

input {
    display: none;
}

HTML

<label>
     select File
     <input type="file">
</label>

Why does button block file selection?

1 Answers1