8

I want to use the label for trick to create custom file input:

    input[type="file"] {
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
    }
    
    section {
     padding: 30px;
     border: 1px solid lightgray;
     width: 200px;
     margin: 100px;
    }
    
    label {
        display: block;
    }
    <section>
     <label for="test">
         <input type="file" id="test">
         <button>Click me</button>
        </label>
    </section>

But when I click the button inside the label it doesn't not open the file popup, only when I click outside it's working. How can I do this?

Armen Michaeli
  • 8,625
  • 8
  • 58
  • 95
undefined
  • 6,366
  • 12
  • 46
  • 90
  • Do you have some javascript that makes the button trigger the file input? Just putting a button next to it won't do anything. – Liftoff May 06 '19 at 13:17
  • 2
    You should not nest multiple interactive elements into a label element to begin with - that is invalid HTML. This should not be a `button` element here in the first place. If you need certain parts of the label content to _look like_ a button, then wrap that part into a span or something, and format it accordingly. – 04FS May 06 '19 at 13:26
  • Possible duplicate of [Cant open file dialog with button inside label](https://stackoverflow.com/questions/33543353/cant-open-file-dialog-with-button-inside-label) – Fraction May 06 '19 at 13:31

3 Answers3

2
<section>
    <label for="test">
      <input type="file" id="test">
      <button onclick="document.querySelector('#test').click()">Click me</button>
 </label>
</section>

You can trigger a click Event on your button that simulates a click on the input

Joscha
  • 240
  • 1
  • 11
1

Input should be in the front of button element and set the with as the width of button.

See the snippet, I made some change.

  input[type="file"] {
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 61px;
  }

section {
    padding: 30px;
    border: 1px solid lightgray;
    width: 200px;
    margin: 100px;
}

label {
  display: block;
  position: relative;
}
<section>
    <label for="test">
      <input type="file" id="test">
      <button>Click me</button>
 </label>
</section>
Radonirina Maminiaina
  • 6,958
  • 4
  • 33
  • 60
  • 1
    possible duplicate: https://stackoverflow.com/questions/33543353/cant-open-file-dialog-with-button-inside-label – Alexander_F May 06 '19 at 13:23
  • Related question but different answer, this one nails it. More straightforward than the accepted answer mentioned in the link given by Alexander_F. – Dale Ryan Apr 16 '23 at 04:07
0

You can give the label inside the button tag and try it.

Be sure to reset the button padding and give styles to the label tag.

input[type="file"] {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
}

button {
  padding: 0;
}

section {
  padding: 30px;
  border: 1px solid lightgray;
  width: 200px;
  margin: 100px;
}

label {
  display: block;
  padding: 1px 7px 2px;
}
<section>

  <input type="file" id="test">
  <button><label for="test">Click me</label></button>

</section>

JSFiddle link

Allan Jebaraj
  • 1,062
  • 8
  • 25