Change cursor type on input type="file"

css, html, input

Solution

Know this a old thread. But the google results brings this up... I Just found a partial solution to chrome (not invalving flash, javascript, extra DOM manipulation with overflow hidden)

- firefox has fixed this bug

- safari (7 at this moment) and chrome dosen't have identical behavior

- safari (7, mac) dosen't work at all for me

- chrome (and maybe opera now when it's webkit) can use ::webkit-file-upload-button pseudo-class

.

input[type=file], /* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button { /* chromes and blink button */
    cursor: pointer; 
}

The problem is that button's doesn't inherit the cursor property in general(?) but the rest of the input[type=file] field dose. Thats why chrome get the pointer except the button

Problem

Simple question... How do I change the cursor type on a file input type? I've tried the following: ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style> input[type="file"] { cursor: pointer; } </style> </head> <body> <input type="file"> </body> </html> ``` For some reason, it won't play ball.

Original source

Related problems