CSS光标：指针[关闭]答案

【问题标题】：css cursor:pointer [closed]CSS光标：指针[关闭]
【发布时间】：2021-12-30 23:15:45
【问题描述】：

我这里有这段代码

.file-wrapper {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.file-wrapper input {
  cursor: pointer;
  font-size: 100px;
  height: 100%;
  filter: alpha(opacity=1);
  -moz-opacity: 0.01;
  opacity: 0.01;
  position: absolute;
  right: 0;
  top: 0;
}

.file-wrapper .button {
  background: #79130e;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  margin-right: 5px;
  padding: 4px 18px;
  text-transform: uppercase;
}

<span class="file-wrapper">
  <input type="file" name="photo" id="photo" />
  <span class="button">Choose a Photo</span>
</span>

在 Safari 和 Google chrome 浏览器中，它不会将光标显示为指针，这是怎么回事？

【问题讨论】：

虽然拥有 JSFiddle 是一件好事，但请始终在此处包含一些相关代码，以防 JSFiddle 在某个时候停止工作。谢谢！
抱歉，是您没有帮助我们了解问题所在。当我们无法理解问题不是我们的错时，期待我们投票支持您的问题。
@Mor Sela 你想要这个输入文件的光标只需检查这个链接jsfiddle.net/mnjKX/7

标签： html css browser mouse-cursor

【解决方案1】：

为<input type='file'> 设置样式可能会遇到问题。

由于安全问题，许多功能已从这些字段中删除，包括一些 CSS 样式功能。这是因为如果可以将文件输入字段的样式设置为看起来像其他内容，则恶意网站可能会诱骗用户上传文件而无意。

文件输入字段被禁用的确切功能因浏览器而异，所以我猜cursor 样式在基于 Webkit 的浏览器中对这些字段禁用，但在其他浏览器中没有。

我可以在您的 Fiddle 中看到，您已经通过在文件输入字段顶部覆盖一个按钮来努力绕过其中一些限制，但我的猜测是光标限制将更难解决方法。

如果是这种情况，那么你将不得不忍受它。

【讨论】：