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

【问题标题】：HTML Custom Upload Button with hand cursor on hover?HTML 自定义上传按钮，手形光标悬停？
【发布时间】：2012-03-22 16:58:44
【问题描述】：

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

有什么想法吗？

【问题讨论】：

标签： html css file-upload

【解决方案1】：

您无能为力，似乎让cursor 属性在<input type="file"> 的“文本”部分起作用，但“按钮”部分确实显示手形指针。

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/

【讨论】：

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

【解决方案2】：

如果你取下opacity: 0;，你就会明白为什么有一个地方cursor:pointer 没有出现。 http://jsfiddle.net/gN2JM/13/ 每当您将鼠标悬停在实际按钮上时，它都会提供常规光标。

使用THIS 来获得应该一直有效的解决方案，或者只是将按钮的位置设置为离开屏幕边缘>> http://jsfiddle.net/gN2JM/14/

【讨论】：

谢谢，javascript 解决方案似乎合法 :) 但字体大小的解决方案更容易。