Fusseldieb Fusseldieb - 1 month ago 7
CSS Question

Clicking on label not working in HTML

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

You've to assign your text to your button, using a <label>.

<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.