CSS - How to style input file?

I am creating an stylizing input file like this :

This is my code :

            <div class="create-input">
                <div class="custom-file-upload">
                    <label for="img" class="img">Télécharger une image</label>
                </div>
                <div>
                    <input type="file" name="img" id="file-input" class="custom-file-upload" required />
                </div>
            </div>

And my CSS :

    input[type="file"] {
    display: none;
}

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

I would like to hide the input file to make it more beautiful with display:none. I saw this on this codepen : http://jsfiddle.net/4cwpLvae/

He can upload the image, but not me. When I click on my button it doesn't work, nothing happens.

What's wrong with my code ?

Thanks !