Clicking on label not working in HTML
<p>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:</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;div class="upload"&gt;
        &lt;input type="file" class="upload" name="upload"/&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS:</strong></p>

<pre><code>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;
}
</code></pre>

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

<pre><code>&lt;div class="upload"&gt;
        Choose File
        &lt;input type="file" class="upload" name="upload"/&gt;
&lt;/div&gt;
</code></pre>

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

<p><a href="https://i.stack.imgur.com/tcp04.gif" rel="nofollow"><img src="https://i.stack.imgur.com/tcp04.gif" alt=""></a></p>

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