Fusseldieb Fusseldieb - 1 year ago 63
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:


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


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"/>

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

Answer Source

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" />

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

.uploadLabel {
  position: absolute;


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download