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>

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?

• javascript
• html
• css

• 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 Commented May 6, 2019 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 Commented May 6, 2019 at 13:26
• Possible duplicate of Cant open file dialog with button inside label – Fraction Commented May 6, 2019 at 13:31

3 Answers 3

<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

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>

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