Html 如何将光标指针添加到文件输入上的按钮覆盖

上传文件

。上传btn包装器{
位置：相对位置；
溢出：隐藏；
显示：内联块；
光标：指针；
}
.btn{
边框：2倍纯色灰色；
颜色：灰色；
背景色：白色；
填充：8px 20px；
边界半径：8px；
字体大小：20px；
字体大小：粗体；
光标：指针；
}
.upload btn包装器输入[类型=文件]{
字体大小：100px；
位置：绝对位置；
左：0；
排名：0；
不透明度：0；
光标：指针；
}

---

在本例中，我想添加cursor:pointer css属性，当鼠标悬停在它上面时，它会将鼠标指针指向手符号。然而，我无法实现同样的目标。我尝试将属性添加到所有组合中的所有三个css元素中，但这不起作用。

您可以将字体大小添加到输入中，它应该会起作用。注意字号：20px

.upload-btn-wrapper input[type=file] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  font-size: 20px;
  cursor: pointer;
}

---

此解决方案的问题在于，它禁用了该区域中的文件上载功能。哦，很抱歉，我错过了。。。。我已经更新了答案：）这在Firefox中有效，但由于某些原因，它在Chrome或Brave EDIT中不起作用：尽管它在部分区域（按钮右侧）上有效。也许我需要找出正确的字体大小值。输入的按钮部分不会变为指针，但文本部分[未选择文件]会变为指针。你知道有什么方法可以使按钮部分消失或变小吗？输入字号：0；和.btn字体大小：20px，带cusor:指针；也许？