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

Answer 3

Nope... that's how you do it. Compare here.

Answer 4

You can put an image instead, and do it like this:

HTML:

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

JQuery:

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});

CAVEAT: In IE9 and IE10 if you trigger the onclick in a file input via javascript the form gets flagged as 'dangerous' and cannot be submmited with javascript, no sure if it can be submitted traditionaly.

Answer 5

You can try instead of any wrapper for input type "file".

<label for="photo"><span class="button">CHOOSE A FILE</span></label>

Check this ... http://jsfiddle.net/pFK74/