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

有任何想法吗？

Answer 1

没有什么可以做的似乎让cursor属性在"文本"部分工作<input type="file">,但"按钮"部分确实显示手形指针.

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

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

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

有没有办法在文件输入更大的跨浏览器上制作原生`browse`按钮？

您可以添加以下内容来放大按钮大小:

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