HTML自定义上传按钮，手形光标悬停在？

Question

遵循此question的CSS样式技巧，我可以创建自定义上传按钮。现在，挑战是让按钮的整个部分将鼠标指针图标改为第一手。

我可以看到here (jSFiddle)部分实现这一目标的方式。正如您所看到的，光标在悬停在按钮的右侧区域时只显示为一只手（我在最新版本的Firefox中）。

css (also on jSFiddle)

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

css (also on 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;
}

有什么想法吗？

Answer 1

你无能为力似乎让cursor属性在<input type="file">的“text”部分工作，但“button”部分确实显示了手形指针。

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

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

借鉴解决方案：

Is there a way to make the native `browse` button on a file input larger cross browser?

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

#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/

Answer 2

如果您取消opacity: 0;，您就会明白为什么会出现cursor:pointer未显示的地方。 http://jsfiddle.net/gN2JM/13/每当你将鼠标悬停在实际按钮上时，它就会给出常规光标。

使用THIS获取可能始终有效的解决方案，或者只是将按钮的位置设置为偏离屏幕边缘＆gt;＆gt; http://jsfiddle.net/gN2JM/14/