Replace input type=file with image

Question

Like many people, I wanted to customize the ugly input type=file, and I knew it couldn't be done without some hacks and/or javascript. However, the problem is that, in my case, the upload file button is only for uploading images (jpeg|jpg|png|gif), so I want to know if I can use "clickable" The image is exactly the same as the input type file (the dialog box is shown and the same $_FILE is shown on the submitted page).

I found some workaround here, which is also interesting (but doesn't work in Chrome =/).

When you want to add some styling to the file button, what do you do? If you have any opinions on this please hit the answer button ;)

Answer 1

This works great for me:

.image-upload>input {
  display: none;
}

<div class="image-upload">
  <label for="file-input">
    <img src="https://icons.iconarchive.com/icons/dtafalonso/android-lollipop/128/Downloads-icon.png"/>
  </label>

  <input id="file-input" type="file" />
</div>

Basically, the for attribute of a label makes clicking on the label the same as clicking on the specified input.

Also, setting the display property to none allows the file input to not be rendered at all, thus hiding it cleanly.

Tested in Chrome, but according to the web, should work in all major browsers. :)

edit: JSFiddle added here: https://jsfiddle.net/c5s42vdz/