Html 为什么光标不'；不要按按钮

我不知道为什么光标没有变为按钮上的指针。我看到一些解决方案说这是因为

z-index

。但是当我尝试使用z-index时，它仍然不起作用

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

上传文件

尝试添加

光标：指针属性”设置为文件的输入类型。
下面是文件输入类型的最后一个片段

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer; /*this is what you need*/
}

让我知道这是否有效。
请尝试一下


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

上传文件
您需要对输入进行以下更改：

加上
添加和
换成

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

上传文件
您只需将
字体大小100%
更改为
字体大小0
，并添加
宽度：100%；高度：100%
到输入文件，以使用entier按钮

.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.btn {
  border: 2px solid gray;
  color: gray;
  background-color: white;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
}

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

积分归@Alon（也感谢大家）：

工作正常。请检查一下


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

上传文件
试试这个

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

对不起，它不见了。我已经试过了。我更新了问题以反映这一点。我假设您正在遵循此代码笔，我添加了我提到的一行，它工作得很好。你在哪个浏览器上检查？奇怪。我也在做。不走运。您必须添加
光标：指针属性。在chrome中，它与
一起工作。上载btn包装输入[type=file]：-webkit文件上载按钮{cursor:pointer；}
-不确定why@Stackedup在FF中，它应该可以与
一起工作。上传btn包装器输入[type=file]{cursor:pointer；}
（我已经检查过了）请注意，在小提琴中没有文件的
光标
样式input@Stackedup您没有定义按钮类型。我想如果你使用
上传一个文件
，那么它在FF中可以正常工作。@Stackedup检查这个：应该对FF和ChromeThis都有效。谢谢@Irin。还要感谢所有其他人的帮助。这个解决方案是如何工作的？当你点击“上传文件”区域时，它不会做任何事情，只有当你点击“可见”按钮下的时候。这个答案是错误的（至少对于Chrome浏览器来说）哦，是的。我也注意到了。对不起，让我帮你修一下。我能修好it@Stackedup真奇怪。这对我在Firefox和macOS上的Chrome都有效。不知道为什么。windows 10上的chrome似乎不起作用。@Stackedup我将
字体大小：100px
更改为
字体大小：0
，似乎在windows上的chrome上工作得很好。非常感谢。这也行得通。现在我们有两个解决方案。我也代表阿隆在下面贴了一张。我将此标记为解决方案。
.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
    display: inline-block;
  }

  .btn {
    border: 2px solid gray;
    color: gray;
    background-color: white;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: bold;
  }

  .upload-btn-wrapper input[type=file]::-webkit-file-upload-button {cursor: pointer; }

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

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