Take the 2-minute tour ×

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>

The css (also on jSFiddle)

#uploadMask {
  display: block;
  overflow: hidden;
  margin-right: 5px;
  position: relative;

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

#uploadMask .button {
  padding:5px 15px;

Any ideas?

share|improve this question

2 Answers 2

up vote 5 down vote accepted

There's nothing you can do it seems to get the cursor property to work on the "text" portion of <input type="file">, but the "button" part does display the hand pointer.


enter image description here

No hand cursor on the red part!

Borrowing from the solution to this question:

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

You can enlarge the button size by adding:

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


share|improve this answer
Wow, the font-size little hack is just what I needed. Thank you! –  Vlad Nicula Mar 5 '12 at 8:25
Great hack indeed. –  Grodriguez Oct 4 '12 at 19:44

If you take off the opacity: 0;, you'll see why there is a place where the cursor:pointer doesn't show up. http://jsfiddle.net/gN2JM/13/ Whenever you are moused over the actual button, it gives the regular cursor.

Use THIS for a solution that supposedly works all the time, or just set the position of the button to go off the edge of the screen>> http://jsfiddle.net/gN2JM/14/

share|improve this answer
Thanks, the javascript solution seems legit :) but the font-size one is easier. –  Vlad Nicula Mar 5 '12 at 8:26

Your Answer


