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

laukok picture laukok · Aug 23, 2011 · Viewed 18.3k times · Source

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

IOrlandoni picture IOrlandoni · Aug 23, 2011

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.