Javascript 使inputfield在按钮div内的任何位置都可单击

我正在实现一个文件上传，并使用bootstrap button类创建了

，使它看起来更好

但由于我这样做了，

输入

只能在特定位置单击（在“aufnehmen”上方）

有人能告诉我当点击div上的任何地方时如何打开窗口吗

这把小提琴说明了我的问题

.btn lg{
字体大小：36px！重要；
}
.文件上传{
位置：相对位置；
溢出：隐藏；
利润率：10px；
}
.fileUpload输入.upload{
位置：绝对位置；
排名：0；
右：0；
保证金：0；
填充：0；
字体大小：20px；
光标：指针；
不透明度：0；
过滤器：alpha（不透明度=0）；
}

福托奥夫内曼酒店

您可以使用

label

而不是

div

来包装文件输入

<label for="cameraImg">

福托奥夫内曼酒店

您可以添加：

.fileUpload input.upload {
  width: 100%;
  height: 100%;
}

---

您可以通过在

输入上设置
高度：100%
来解决此问题：


.btn lg{
字体大小：36px！重要；
}
.文件上传{
位置：相对位置；
溢出：隐藏；
利润率：10px；
}
.fileUpload输入.upload{
位置：绝对位置；
排名：0；
右：0；
保证金：0；
填充：0；
字体大小：20px；
光标：指针；
不透明度：0；
过滤器：alpha（不透明度=0）；
边框：1px实心#C00；
高度：100%；/*添加此规则*/
}

福托奥夫内曼酒店
设置
宽度：100%；高度：100%
；对于input.upload，它可以工作。。。检查下面的代码片段


.btn lg{
字体大小：36px！重要；
}
.文件上传{
位置：相对位置；
溢出：隐藏；
利润率：10px；
}
.fileUpload输入.upload{
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
右：0；
保证金：0；
填充：0；
字体大小：20px；
光标：指针；
不透明度：0；
过滤器：alpha（不透明度=0）；
}

福托奥夫内曼酒店
您很快就得到了一系列问题的答案，但我认为向您展示我们是如何在如此短的时间内发现问题所在的，也就是说，如何调试这些问题也很重要

如果在开发人员控制台中检查元素并在代码中将鼠标悬停在其上，则可以看到高亮显示的轮廓


这样，您可以看到输入元素本身没有按钮高，这就是为什么该区域之外的任何单击都不会触发输入的单击事件

从那时起，你可以想出自己的解决方案（按照一些答案的建议设置
高度：100%
，或者设置
顶部：0；右侧：0；底部：0；左侧：0
，等等）。
决定选择你的，因为我只需要添加一条规则。谢谢没问题。别忘了接受这个答案，这也是一个很好的解决方案，但我选择了@Rorymcrossan的答案，因为我不必用标签来更改div。无论如何谢谢你！将
输入
包装在
标签
中是一种很好的做法，不管怎样，编码是快乐的。啊，我在谷歌上搜索了你说的，似乎是对的。那我就去好好练习！谢谢你指出这一点。很高兴！我可以帮你，谢谢。对于未来，我会记住这一点！很好的描述。但愿我能投两次票；）