html - How apply CSS to browse button

Question

I'm using <input type="file" /> in my webpage. I've different CSS classes for button and other controls. But I'm not able to add any class, style to browse button that appears due to above tag.

Is there any way to change its default appearance?

Thanks is advance.

Answer 1

You can't do that. You could only apply style to the entire <input />.

You could use opacity: 0 CSS hacks to replace it with you favorite image and image:hover.

Keep in mind that height: property will not work on Firefox 3.6; You could use font-size: to enlarge the height instead.

I have an example made: http://timc.idv.tw/html5-file-upload/ ; inspect the CSS of the 2nd demo.