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

Question

i have CSS code that does not really work on webkit browsers such as safari and chrome

if you want live example here it is http://jsfiddle.net/mnjKX/1/

i have this CSS code

.file-wrapper {     cursor: pointer;     display: inline-block;     overflow: hidden;     position: relative; } .file-wrapper input {     cursor: pointer;     font-size: 100px;     height: 100%;     filter: alpha(opacity=1);     -moz-opacity: 0.01;     opacity: 0.01;     position: absolute;     right: 0;     top: 0; } .file-wrapper .button {     background: #79130e;     -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; } 

and this HTML code :

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

this code shows hidden input file tag , the problem here is that the cursor:pointer is does not work on webkit browsers ,

how can i solve it or bypass / overtake this ?

Answer 1

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 :)

Answer 2

An interesting (cross-browser) solution I came up with:

Give the input a CSS property of cursor:pointer, place the input in a div (with overflow:hidden) and give the input a left padding of 100%. The padded area will have the pointer property.

I personally don't trust -webkit and -moz fixes because I feel like they are arbitrary and temporary, and will be replaced soon.