Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 396
Vlad Nicula Avatar asked Mar 05 '12 07:03

Vlad Nicula


People also ask

How do I change my cursor to hand when hovering in HTML?

Answer: Use the CSS cursor Property You can simply use the CSS cursor property with the value pointer to change the cursor into a hand pointer while hover over any element and not just hyperlink.

How do I customize the upload button in HTML?

Use a label tag and point its for attribute to the id of the default HTML file upload button. By doing this, clicking the label element in the browser toggles the default HTML file upload button (as though we clicked it directly).

How do you change the cursor in HTML?

The default cursor for a hyperlink is "pointer". To change it, you need to specify the cursor type for your <a> element with the CSS :hover selector. In our example, we style only the "link" class.


2 Answers

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.

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

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 */
}

http://jsfiddle.net/gN2JM/15/

like image 71
Wesley Murch Avatar answered Oct 03 '22 21:10

Wesley Murch


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/

like image 22
Isaac Fife Avatar answered Oct 03 '22 21:10

Isaac Fife