5

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>
Run
  • 54,938
  • 169
  • 450
  • 748
  • It does become a pointer for `input type="file"` when you mouse over the button, and for `input type="text"` when you mouse over the text field. – BoltClock Aug 23 '11 at 01:30
  • yes it is on the button but not when you mouse over the `input field` of `file`. – Run Aug 23 '11 at 01:33
  • Don't believe this is possible. But *why on Earth* would you want to do that? The point of the text cursor is to show that you can enter text there... – animuson Aug 23 '11 at 01:45
  • basically it's browser implementation specific and not under your control. – Joseph Marikle Aug 23 '11 at 01:52
  • 1
    When you click the textfield inside the file input, it behaves as if you clicked the button anyway, so might as well look like the same on the textfield as on the button. But alas not fixable in Firefox. Can be fixed in Chrome with ::-webkit-file-upload-button { cursor: pointer } – oldwizard Jan 31 '13 at 12:23
  • maybe this will help: http://stackoverflow.com/a/23860302/1008999 – Endless May 25 '14 at 21:55

6 Answers6

4

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.

IOrlandoni
  • 1,790
  • 13
  • 30
2

Assign to the input role="button"

the_flucs
  • 217
  • 1
  • 6
  • 21
  • Can you elaborate on why this works, for the asker and community's benefit? – mjk Nov 04 '20 at 17:48
  • @mjk, unfortunately I can't. I came across this question when I had this same issue and thought to write what it worked for me. I had the time to look a bit more into roles in HTML, thanks to your comment, and I actually couldn't find any relation with css. I personally assigned ```role=button``` to the input because in my case that input had that role in my code (so correct from accessibility and semantic sides). Plus, it solved my issue of visually indicate to the user that that was actually a button (with the cursor: pointer), when nothing else was working. If you know more, please share. – the_flucs Nov 06 '20 at 10:07
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

Paul
  • 139,544
  • 27
  • 275
  • 264
  • thanks. a good hack but it does not work on opera - the dialog popup does not show anymore. see my edit above for my solution. thanks. – Run Aug 23 '11 at 02:15
1

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

Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129
0

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.

ParPar
  • 7,355
  • 7
  • 43
  • 56
0

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/

Imran
  • 26
  • 6