悬停时带有手形光标的HTML自定义上传按钮？

Question

根据这个问题中的CSS样式技巧，我成功地创建了一个自定义上传按钮。现在的挑战是使整个按钮区域都能将鼠标指针图标更改为手型。

我部分实现的方式可以在这里（jSFiddle）看到。正如您所见，在鼠标悬停在按钮的正确区域时，光标只会显示为手型（我使用的是最新版本的Firefox）。

CSS代码（也在jSFiddle上）

 <span id="uploadMask">
    <input type="file" multiple="multiple" name="file" id="file_upload">
     <span class="button">Select Documents</span>
 </span>

这是关于CSS的内容 (同样也可以在jSFiddle上查看)

#uploadMask {
  width:160px;
  display: block;
  float:left;
  overflow: hidden;
  height:32px;
  margin-right: 5px;
  position: relative;
}

#uploadMask input {
  position: absolute;
  top:0;
  bottom: 0;
  right:0;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}

#uploadMask .button {
  background:#ccc;
  line-height:24px;
  padding:5px 15px;
  display:block;
}

有什么想法吗？

- Vlad Nicula

Answer 1

似乎无法在的“文本”部分上使用“cursor”属性，但“按钮”部分确实显示手形指针。

http://jsfiddle.net/gN2JM/17/

^{红色部分没有手形光标！}

从这个问题的解决方案中借鉴：

有没有办法让文件输入的原生“浏览”按钮在跨浏览器上变大？

您可以通过添加以下内容来放大按钮大小：

#uploadMask input {
    font-size:200px; /* Any high number to guarantee it's big enough,
                        overflow:hidden on the parent takes care of the rest */
}

http://jsfiddle.net/gN2JM/15/

- Wesley Murch

---

哇，字体大小的小技巧正是我所需要的。谢谢！ - Vlad Nicula

Answer 2

如果你去掉 opacity: 0;，你就会发现为什么有一个地方不显示 cursor:pointer。http://jsfiddle.net/gN2JM/13/ 当你将鼠标悬停在实际按钮上时，它会给出普通光标。

使用 这个 作为一种解决方案，据说可以始终有效，或者只需将按钮的位置设置为超出屏幕边缘 >> http://jsfiddle.net/gN2JM/14/

- Isaac Fife

---

谢谢，JavaScript的解决方案看起来很合理 :) 但是改变字体大小的方法更简单。 - Vlad Nicula