HTML Custom Upload Button with hand cursor on hover?

Following the CSS style trick from this question I was able to create a custom upload button. Now, the challenge is to make the entire portion of the button change the mouse pointer icon to the hand one.

The way I partially achieved this can be seen here (jSFiddle). As you can see, the cursor only appears to be a hand while hovering the right area of the the button (I'm in the latest version of firefox).

The css (also on jSFiddle)

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

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

Any ideas?