How can I style input file textbox? [duplicate]

Question

This question already has an answer here:

• Styling an input type=“file” button 39 answers

How can I style html the input file type using css, and also change the browse button, thanks

Answer 1

you can't !

you can use flash to simulate a file box.

Answer 2

You can not.

You can use a Flash control (usual caveats apply), or absolutely position your custom control behind the existing one, and set its opacity to 0.

That way, apparent clicks to your custom control will actually click your invisible input input.

You can capture the text from the input, using JavaScript. Browsers generally limit you to the filename only.

Answer 3

Short Answer

You can't.

Long Answer

Make your file input invisible using opacity, then make a fake div that contains a normal text input and a button, position it absolutely so that it covers the real input, then set its z index to be below the real input. Style the elements.

When a user clicks on the text input or the button, they will actually be clicking on the real input that is transparent.

Working example: styled file input