make <input type ="file">元素填充其父<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;
}

我希望<img>并<input type="file">相互重叠,两者都填满了他们的父母<div>.如何修复我的CSS才能实现这一目标？

Answer 1

文件输入字段实际上并不符合规则(或至少如您所期望的那样).为了完成你所听到的事情,你必须要有创意.示例:http://jsfiddle.net/ZTPCd/

Answer 2

无法更改文件输入的大小.您可以重新设计文件输入,但可点击区域的大小不可修改.

编辑: Aaron显示了第一个技巧,我添加了第二个技巧,所以请看这个小提琴,其中整个图像可以点击文件输入.

诀窍是设置font-size为一个大值,然后opacity设置为零,最后添加overflow: hidden到父元素.