CSS: How make the cursor to become a pointer on the input file?

Question

How can I make the cursor to become a pointer on an input file or an input text when you hover it?

My try but it does not work of course,

<input type="file" style="cursor: pointer;"/>

Or do I have to use javascrip (jquery)??

EDIT:

Sorry my mistake - the cursor does change to a point on

<input type="text" style="cursor: pointer;"/>

But not on

<input type="file" style="cursor: pointer;"/>

You can test this link on Firefox then you see what I mean.

Only the button of file change to the pointer but not the input field of file.

EDIT 2:

Here is my CSS 'hack',

<div id="right-col" style="position:relative; width:76px; height:24px; overflow:hidden; border:1px solid #000;">
<input type="file" style="position:absolute; top:0; right:0; z-index:2;opacity:1; cursor:pointer;"/>
</div>

Answer 1

Cannot be done. The input type file is one of the most protected objects by the browsers. Some browsers allow you to do more things than others, depending on what they consider "safe".

You could use a flash button for it. In fact, there are very nice plugins written to make file uploading a nicer thing, such as Uploadify.

Answer 2

You can do this ugly jQuery hack:

$('input:file').each(function(){
    var $input = $(this);
    $input.before($('<div>').height($input.height()).width($input.width()).css(
        {
            cursor: 'pointer',
            position: 'absolute',
            zIndex: $input.css('z-index')
        }).click(function(){
            $(this).hide();
            $input.click();
            $(this).show();
        }));
});

But it prevents the animation you normally see when you mousedown on a button element. JSFiddle