make <input type="file"> element fill up its parent <div>

Question

HTML:

<div>
  <img src="some/path/" class="thumbnail" />
  <input type="file" class="image_upload" />
</div>

CSS:

div
{
  border: 2px solid #ccc;
  width: 50px;
  height: 50px;
  overflow: hidden;
}
.thumbnail
{
  width: 100%;
}
.image_upload
{
  opacity: 0;
  position: absolute;
}

I want <img> and <input type="file"> to overlap with each other and both fill up their parent <div>. How can I fix my CSS to achieve that?

Answer 1

It is not possible to change the size of a file input. You could redesign the file-input and, but the size of the clickable area isn't modifiable.

Edit: Aaron shows a first trick, and I added the second one, so see this fiddle in which the whole image is clickable for the file input.

The trick is to set font-size to a large value, then opacity to zero and finally add overflow: hidden to the parent element.

Answer 2

File input fields don't really play by the rules (or at least as you'd expect). To accomplish what it sounds like you're after, you've gotta get creative. Example: http://jsfiddle.net/ZTPCd/

Answer 3

Its Possible.

Add this css for input type file

.My_CSS {
    opacity: 0; 
    border: none;
    border-radius: 3px;
    background: grey;
    position: absolute;
    left: 0px;    
    width: 100%;
    top: 0px;
    height: 100%;
}