0

I have been trying to change the cursor style to look like a pointer rather than an I beam thing, but it looks like FF does not respect the cursor spec in an input file field. For example, I have made this small fiddle: http://jsfiddle.net/jDZtn/4/ where Id like the cursor to look like a pointer rather than an Ibeam when the user hovers over it. My end plan is to introduce opacity==0 and use a clickable button over it.

I am not sure if this behaviour is a bug or not.

JohnJ
  • 6,736
  • 13
  • 49
  • 82
  • Possible duplicate: [CSS: How make the cursor to become a pointer on the input file?](http://stackoverflow.com/questions/7155381/css-how-make-the-cursor-to-become-a-pointer-on-the-input-file) – merv Jun 27 '12 at 03:40

1 Answers1

2

A better solution would be to display:none the file input, and have your button .click() it.

Edit: After some testing, I noticed that safari wouldn't let me .click() the file input since it was set to display:none, so I created this fiddle that seems to work in all browsers. I just hid the file input via positioning/visibility rather than display:none.

Reference: https://developer.mozilla.org/en/Using_files_from_web_applications#Using_hidden_file_input_elements_using_the_click()_method

Sean Johnson
  • 5,567
  • 2
  • 17
  • 22
  • thanks for this Sean. However, your fiddle does not work on FF - The "my custom file button" still shows an I beam on my FF 13.0.1 on my linux box. – JohnJ Jun 27 '12 at 03:26
  • Haha, in all of my excitement I simply forgot to add cursor:pointer to #button. I was too busy focusing on actually making the custom button clickable. [here](http://jsfiddle.net/Jvafd/3/) you go. – Sean Johnson Jun 27 '12 at 03:27
  • Thanks a lot for this Sean. I implemented it as per your fiddle. It works fine now on Chrome. But, in FF, when I click on the button to upload, it ends up opening 2 windows for file upload.. Would you have any clue why this could be? In Chrome everything is fine - one file selection window opens as expected. – JohnJ Jun 27 '12 at 03:50
  • Try removing visibility:none; and see if the file input is on top of your button - it may be possible that firefox is not obeying the positioning to move it off of the page (to hide it). That would cause two click() events to happen - one on the file input and one on your button - opening two windows. – Sean Johnson Jun 27 '12 at 03:54
  • If I remove visibility:hidden and opacity=0 (removing both of these), I now get 3 windows in Firefox and now 2 windows in Chrome! strange! – JohnJ Jun 27 '12 at 03:59
  • Does the same thing happen with the fiddle as your implementation? – Sean Johnson Jun 27 '12 at 04:11
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/13092/discussion-between-sean-johnson-and-johnj) – Sean Johnson Jun 27 '12 at 04:14
  • No Sean.. It seems fine in the fiddle :( – JohnJ Jun 27 '12 at 04:15