Clicking on label not working in HTML

Question

I'm trying to make a custom file selection button in HTML and CSS. I've read on the internet that it can be done, hiding the original button and 'drawing' a new one over it, like so:

HTML:

<div class="upload">
        <input type="file" class="upload" name="upload"/>
</div>

CSS:

div.upload {
    width: 157px;
    height: 57px;
    background-color: silver;
}

div.upload input {
    display: block !important;
    width: 157px !important;
    height: 57px !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

And it's working, obviously... but I want only a text, not a image. So I tried it like this way:

<div class="upload">
        Choose File
        <input type="file" class="upload" name="upload"/>
</div>

And it won't work when I click on the label. It only works when I click below it.

Why doesn't this work and how can I make this work? I also tried with pointer-events and nothing...

Answer 1

You have to assign your text to your <button>, using a <label> with a for attribute equal to the id of the <input>.

<div class="upload">
  <label class="uploadLabel" for="uploadBtn">  Choose File</label>
  <input id="uploadBtn" type="file" class="upload" name="upload" />
</div>

In order to completely cover the button with your label, you'll also have to add absolute positioning.

.uploadLabel {
  position: absolute;
}

Demo

Why is this necessary?

The event is triggered on your button. This basically means, clicking on a plain text element won't do anything. To trigger a click event on your button, you simply delegate the click on your label to your button.