how to display pointer cursor over a "Browse" button

Question

my last question on pointer cursors.

in Html you have a input file tag. This shows a textbox and a browse button. What I want to know is how can I display a cursor pointer when hovering over the "Browse" button?

Below is code:

var $videofile = $('<input />')
    .attr({
        type: 'file',
        name: 'videoFile',
        id: 'videoFile'
    });

Can you show where the textbox and browse button are defined? — Jon Egerton, Feb 03 '12 at 12:17
It's the standard layout for a file input in IE. I believe it's a button and a label in Chrome & Firefox. — Reinstate Monica Cellio, Feb 03 '12 at 12:20
mybe I'm missing the point but whats wrong with `style="cursor:pointer;"` on the element? Or a class with a css? — Bazzz, Feb 03 '12 at 12:21
@Bazzz That makes it a pointer over the whole thing in IE and everything _but_ the button in other browsers. — Reinstate Monica Cellio, Feb 03 '12 at 12:24
You can't do *just* what you're asking. If you do it in IE then the cursor is a pointer over both the textbox and the button. All other browsers show a button and a label (no textbox), and the cursor turns to a pointer over the label, but not the button. Look at this link to see how to style the file input so you can have more control over it... http://www.quirksmode.org/dom/inputfile.html — Reinstate Monica Cellio, Feb 03 '12 at 12:31
Short answer, [you can't][1]. [1]: http://stackoverflow.com/questions/1537223/change-cursor-type-on-input-type-file — Alexander Støver, Feb 03 '12 at 12:40

score 0 · Answer 1 · answered Feb 03 '12 at 12:14

0

var $videofile = $('<input />')
    .attr({
        type: 'file',
        name: 'videoFile',
        id: 'videoFile'
    }).css({"cursor":"pointer"});

answered Feb 03 '12 at 12:14

Aliostad

80,612
21
160
208

Only works in IE and then the cursor is a pointer over the textbox as well as the button. – Reinstate Monica Cellio Feb 03 '12 at 12:21
Try this in a few browsers to see the problem... http://jsfiddle.net/pfKQf/2/ It *does not* make the cursor a pointer in anything but IE, over the button, but in IE it does it over the textbox as well. There's no way to do this other than hiding the button and adding a custom one. – Reinstate Monica Cellio Feb 03 '12 at 12:28

score 0 · Accepted Answer · answered Feb 03 '12 at 12:14

0

try

var $videofile = $('<input />')
        .attr({
            type: 'file',
            name: 'videoFile',
            id: 'videoFile'
        }).css({"cursor":"pointer"});

answered Feb 03 '12 at 12:14

Rafay

30,950
5
68
101

Only works in IE and then the cursor is a pointer over the textbox as well as the button. – Reinstate Monica Cellio Feb 03 '12 at 12:22

score 0 · Answer 3 · answered Feb 03 '12 at 12:15

0

You can use the cursor value in css:

var $videofile = $('<input />')
    .attr({
        type: 'file',
        name: 'videoFile',
        id: 'videoFile'
    })
    .css('cursor','pointer');

answered Feb 03 '12 at 12:15

Jon Egerton

40,401
11
97
129

See my comment - we need more information about how the markup looks to address that. – Jon Egerton Feb 03 '12 at 12:17
Only works in IE and then the cursor is a pointer over the textbox as well as the button. – Reinstate Monica Cellio Feb 03 '12 at 12:22

score 0 · Answer 4 · edited May 23 '17 at 12:11

0

What you're asking is currently not possible without resorting to hacks. There is already another thread on this issue.

edited May 23 '17 at 12:11

Community

1
1

answered Feb 03 '12 at 12:43

Alexander Støver

645
3
7

how to display pointer cursor over a "Browse" button

4 Answers4