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.

[![](https://i.stack.imgur.com/tcp04.gif)](https://i.stack.imgur.com/tcp04.gif)

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