为什么按钮上的光标不会改变？

Question

我不确定为什么当鼠标悬停在按钮上时，光标没有变成指针。有些解决方案说这是因为 z-index 的问题。但是当我尝试使用 z-index 时，它仍然无效。

.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: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}

<div class="upload-btn-wrapper">
  <button class="btn">Upload a file</button>
  <input type="file" name="myfile" />
</div>

感谢任何帮助。

我在从这个CodePen作弊：

https://codepen.io/adambene/pen/xRWrXN

- Stackedup

---

你需要在 .btn 类中添加 cursor: pointer; 属性。 - Dheeraj Kumar

在Chrome中，它可以使用.upload-btn-wrapper input[type=file]::-webkit-file-upload-button {cursor: pointer; }工作-不确定为什么。 - Alon Eitan

@Stackedup 请查看：https://codepen.io/anon/pen/ZdrYGO 应该适用于FF和Chrome两种浏览器。 - Alon Eitan

我必须离开了，所以我邀请你写下自己的答案并自行接受 :) 很高兴能帮助。 - Alon Eitan

@Stackedup，请检查我的解决方案，它完美运作。 - kach

Answer 1

尝试在文件输入类型中添加“cursor: pointer;”属性。 以下是文件输入类型的最终代码片段。

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

请告诉我是否可行。

- zipal_

---

抱歉，它刚刚消失了。我已经尝试过了。我更新了问题以反映这一点。 - Stackedup

我假设你正在关注这个CodePen，https://codepen.io/adambene/pen/xRWrXN。我按照我之前提到的添加了一行代码，现在它可以正常工作了。你是用哪个浏览器来查看的呢？ - zipal_

奇怪，我也在做这件事。没有运气。 - Stackedup

Answer 2

您需要对输入进行以下更改：

1. 添加 cursor: pointer。
2. 添加width: 100%和height: 100%。
3. 将font-size: 100px改为font-size: 0。

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

.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%;
}

<div class="upload-btn-wrapper">
  <button class="btn">Upload a file</button>
  <input type="file" name="myfile" />
</div>

- sergdenisov

---

@Stackedup 这很奇怪。在macOS上，我用Firefox和Chrome都没有问题。 - sergdenisov

不确定为什么，在Windows 10上的Chrome浏览器似乎无法工作。 - Stackedup

@Stackedup 我把 font-size: 100px 改成了 font-size: 0，在 Windows 上的 Chrome 中似乎运行良好。 - sergdenisov

太棒了，谢谢。这也可行。现在我们有两个解决方案。我也代表Alon发布了一个下面的解决方案。我将其标记为解决方案。 - Stackedup

Answer 3

你只需要将font-size 100%更改为font-size 0，并在输入文件中添加width:100%;height:100%以获取整个按钮。

.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%;
}

- kach

Answer 4

感谢 @Alon（也感谢所有人）提供的帮助：

<div class="upload-btn-wrapper">
  <button class="btn">Upload a file</button>
  <input type="file" name="myfile" />
</div>

以下 CSS 可在 FireFox 和 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;
  }

- Stackedup

Answer 5

尝试这个。

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

- Hemant Singh

Answer 6

它正常工作，请检查一下

.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: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  text-indent: -999px;
  cursor: pointer;
}

<div class="upload-btn-wrapper">
  <button class="btn">Upload a file</button>
  <input type="file" name="myfile" />
</div>

- Irin

Answer 7

请尝试一下。

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

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

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

<div class="upload-btn-wrapper">
  <button class="btn">Upload a file</button>
  <input type="file" name="myfile" />
</div>

- Irin

---

这个可行。谢谢@Irin。同时也感谢其他所有人的帮助。 - Stackedup

那个解决方案怎么样？当你点击“上传文件”区域时它什么也不做，只有在你点击可见按钮下面时才会有反应。这个答案是错误的（至少对于Chrome浏览器来说）。 - Alon Eitan

哦，是的。我也刚注意到了。抱歉。 - Stackedup

让我来为您修复这个问题。我可以解决它。 - Irin