使<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来实现呢？

- tamakisquare

Answer 1

无法更改文件输入的大小。您可以重新设计文件输入框, 但可点击区域的大小不可修改。 编辑：Aaron展示了第一个技巧，我添加了第二个技巧，请查看this fiddle，其中整个图像可用于文件输入。

技巧是将font-size设置为较大值，然后将opacity设置为零，最后在父元素中添加overflow: hidden。

- Yogu

---

谢谢。我喜欢你使用的 font-size，opacity:0 和 overflow:hidden，但我觉得 line-height 是不必要的。 - tamakisquare

哦，我明白了。如果设置了 font-size，则可以省略 line-height。 - Yogu

Answer 2

文件输入字段并没有遵循规则（或者说至少不是你所期望的）。要实现你想要的功能，必须得有创意。例如：http://jsfiddle.net/ZTPCd/

- Aaron

---

太好了！你推翻了我的答案。请看这个链接：http://jsfiddle.net/pJWcs/，在这个链接中整张图片都可以点击。 - Yogu

Answer 3

可以实现。

为input type file添加以下CSS：

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

- Dinesh Kanivu

Answer 4

在这里，您需要使用一些JavaScript。由于我没有看到任何更改的CSS的方法，因此我将其隐藏，但是<div>负责<input type='file'>。

var box = document.getElementById("box");
var file = document.getElementById("file");

box.addEventListener('click', function(){
 file.click();
})

#box {
    font-size: 30px;
    text-align: center;
    width: 300px;
    height: 200px;
    padding: 10px;
    border: 1px solid #999;
    position: relative;
}

p {
  position: absolute;
  top: 80px;
  color: white;
}

#file {
    width: 100%;
    height: 100%;
    visibility: hidden;
    z-index: 100;
}

<div id="box">
    <img id="image" src="http://guide.denverpost.com/media/photos/full/mountain_600x600.jpg" width="100%" height="100%"/>
    <input type="file" id="file"/>
    <p>Click to import</p>
</div>

- RegarBoy

Answer 5

你需要在父级div中添加相对定位，这样input字段的位置才不会相对于浏览器窗口定位。（可在Google上查找关于绝对/相对定位的更多信息）。

并且你需要为input标签添加一些特定的定位（top/left）。

http://jsfiddle.net/NbhQY/

（如果需要包含文件上传，则您的外部div将需要稍微大一些。）

- ptriek