Change Cursor Type on Input Type="File"

Cursor:pointer not working on input type file

Try some manipulation like this

HTML

<span class="file-wrapper">
  <input type="file" name="photo" id="photo" />
  <span class="button">Choose a File</span>
</span>

CSS

.file-wrapper {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  position: relative;
}
.file-wrapper input {
  cursor: pointer;
  font-size: 100px;
  filter: alpha(opacity=1);
  -moz-opacity: 0.01;
  opacity: 0.01;
  position: absolute;
  right: 0;
  top: 0;
}
.file-wrapper .button {
  background: #333;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  margin-right: 5px;
  padding: 4px 18px;
  text-transform: uppercase;
}

DEMO

hand cursor on input type= file

If you really want the entire div as a hand, you can use the ::after pseudo-element to cover the whole div and set that to cursor:pointer instead (have changed background to yellow to highlight the div area):

 #camerathumbnail input {    width: auto;    height: auto;    position: absolute;    visibility: visible;    margin-top: -5px;    margin-left: 87px;    padding: 2px;    border: 1px solid #d7d7d7;    background: url(/Images/Camera_import_24.png) no-repeat center;    background-color: #ff0;}
input::after {    content:'';    cursor:pointer;    position:absolute;    top:0;    left:0;    width:100%;    height:100%;    display:block;}

<div id="camerathumbnail">    <input type="file" id="thumbUpload" onchange="fileSelectHandler('module','false')" accept="image/gif, image/jpeg,image/jpg,image/bmp,image/pjpeg,image/png"/></div>

The cursor:pointer property doesn't apply to file upload buttons in Webkit browsers

For starters, it works in Chrome if you remove the height declaration from the input rule.

Live demo: http://jsfiddle.net/mnjKX/16/

But this transparent input field is a hell of a hack... I wouldn't rely on it.

Update:

And here is the proper solution:

::-webkit-file-upload-button { cursor:pointer; }

I thought the file upload button is unreachable, but Chrome's user agent style sheet proved my wrong :)

How to get the cursor to change to the hand when hovering a button tag

see:
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

so you need to add: cursor:pointer;

In your case use:

#more {
  background:none;
  border:none;
  color:#FFF;
  font-family:Verdana, Geneva, sans-serif;
  cursor:pointer;
}

This will apply the curser to the element with the ID "more" (can be only used once). So in your HTML use

<input type="button" id="more" />

If you want to apply this to more than one button then you have more than one possibility:

using CLASS

.more {
  background:none;
  border:none;
  color:#FFF;
  font-family:Verdana, Geneva, sans-serif;
  cursor:pointer;
}

and in your HTML use

<input type="button" class="more" value="first" />
<input type="button" class="more" value="second" />

or apply to a html context:

input[type=button] {
  background:none;
  border:none;
  color:#FFF;
  font-family:Verdana, Geneva, sans-serif;
  cursor:pointer;
}

and in your HTML use

<input type="button" value="first" />
<input type="button" value="second" />

Styling an input type= file button

Styling file inputs are notoriously difficult, as most browsers will not change the appearance from either CSS or javascript.

Even the size of the input will not respond to the likes of:

<input type="file" style="width:200px">

Instead, you will need to use the size attribute:

<input type="file" size="60" />

For any styling more sophisticated than that (e.g. changing the look of the browse button) you will need to look at the tricksy approach of overlaying a styled button and input box on top of the native file input. The article already mentioned by rm at www.quirksmode.org/dom/inputfile.html is the best one I've seen.

UPDATE

Although it's difficult to style an <input> tag directly, this is easily possible with the help of a <label> tag. See answer below from @JoshCrozier: https://stackoverflow.com/a/25825731/10128619