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

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.