单击标签不适用于HTML

Question

我正在尝试在HTML和CSS中创建自定义文件选择按钮。我已经在互联网上阅读到可以完成的操作，隐藏原始按钮并在其上“绘制”一个新按钮，如下所示：

HTML：

<div class="upload">
        <input type="file" class="upload" name="upload"/>
</div>

CSS：

div.upload {
    width: 157px;
    height: 57px;
    background-color: silver;
}

div.upload input {
    display: block !important;
    width: 157px !important;
    height: 57px !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

很明显，它正在工作……但是我只需要一个文本，而不是图像。所以我这样尝试了：

<div class="upload">
        Choose File
        <input type="file" class="upload" name="upload"/>
</div>

当我单击标签时，它将不起作用。仅当我单击它下方时，它才起作用。

为什么不起作用，我如何使它起作用？我也尝试过pointer-events并且什么也没有...

Answer 1

您必须使用来将文本分配给按钮<label>。

<div class="upload">
  <label class="uploadLabel" for="uploadBtn">  Choose File</label>
  <input id="uploadBtn" type="file" class="upload" name="upload" />
</div>

为了用标签完全覆盖按钮，您还必须添加绝对位置。

.uploadLabel {
  position: absolute;
}

演示版

为什么这是必要的？

该事件在您的按钮上触发。这基本上意味着，单击纯文本元素不会执行任何操作。要触发按钮上的点击事件，只需将标签上的点击委托给按钮即可。