How do I style file inputs in mobile browsers?

Question

I'm developing a fairly simple mobile web application using HTML5 and jQuery.

One of the features i am trying to develop is the ability to take a photo using the mobile devices' camera, say iPhone.

I've had a Google, and found that:

<input type="file"/>

Does exactly that.

However, the default button is 'ugly' populated with 'Choose File'.

Ts there a way i can replace this button with an icon/image, for example:

<input type="file" img="images/camera.png/>

Happy for other options to be put forward.

Thanks

Answer 1

I'd recommend using the method described here on Quirksmode which I have used several times in the past.