html - CSS 光标在 Chrome 中不起作用

Question

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

当鼠标悬停在该覆盖横幅上时，CSS“光标:指针”声明在我测试过的浏览器中运行良好，除了 Chrome。对于 Windows 和 Mac 版 Chrome，指针光标仅出现在该覆盖层的边缘。当光标悬停在“更改照片”文本上时，光标恢复为箭头。

以下是相关的 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，但由于某种原因需要应用双倍高度。