Clicking on label not working in HTML
css, html
Solution
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.
Problem
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...