CSS光标在Chrome中不起作用

Question

我使用this script为我的网站上的个人资料图片上传功能提供支持。它会在底部显示一个覆盖横幅的图像：

当鼠标悬停在叠加横幅上时，CSS＆＃34;光标：指针＆＃34;声明在我已经测试的浏览器中正常工作，除了用于Chrome。使用适用于Windows和Mac的Chrome，指针光标仅显示在该叠加层的边缘。当光标悬停在＆＃34;更改照片＆＃34;文本，光标恢复为箭头。

以下是相关的HTML：

<div id="imgChange">
  Change Photo
  <input type="file" accept="image/*" name="image_upload_file" id="image_upload_file">
  <input type="hidden" name="user_id" id="user_id" value="16">
</div>

以下是相关的CSS：

#imgChange input[type="file"] {
  cursor: pointer;
  }

我已经整理了一个展示问题here的网页。

任何人都知道问题可能是什么？

Answer 1

我不确定为什么会出现此问题，但似乎将输入元素的高度设置为60px可以解决问题：

#imgChange input[type="file"] {
    bottom: 0;
    cursor: pointer;
    height: 60px;     /* <-- */
    left: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    z-index: 0;
}

元素的高度为30px但由于某种原因需要应用双倍高度。

Answer 2

如果您删除了opacity: 0;中的#imgChange input[type="file"]，您将看到原因：）