-1

I am creating an stylizing input file like this :

enter image description here

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 !

Caroline Dorchies
  • 27
  • 1
  • 7
  • 1
    Does this answer your question? [Styling an input type="file" button](https://stackoverflow.com/questions/572768/styling-an-input-type-file-button) – Roy Sep 20 '22 at 09:15
  • _"What's wrong with my code ?"_ - the `for` attribute on your label. It needs to contain the _id_ of a form element, not a name. – CBroe Sep 20 '22 at 09:22

1 Answers1

0

You have to change the for attribute of label to the id of the input like this:

<label for="file-input" class="img">Your label</label>

<input type="file" name="img" id="file-input" class="custom-file-upload" required />

I hope that answers the issue

Saad Rehman
  • 79
  • 7