Replace input type=file by an image

Question

Like a lot of people, I\'d like to customize the ugly input type=file, and I know that it can\'t be done without some hacks and/or javascript. But,

Answer 1

Great solution by @hardsetting, But I made some improvements to make it work with Safari(5.1.7) in windows

.image-upload > input {
  visibility:hidden;
  width:0;
  height:0
}

I have used visibility: hidden, width:0 instead of display: none for safari issue and added pointer-events: none in img tag to make it working if input file type tag is in FORM tag.

Seems working for me in all major browsers.

Hope it helps someone.