How can I style input file textbox?

Question

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

Michael Robinson · Answer 1 · 2011-01-30T01:11:37.467

9

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

edited Jan 30 '11 at 01:11

answered Jan 30 '11 at 01:06

Michael Robinson

29,278
12
104
130

5

This will trigger NoScript's ClearClick feature which warns users when they interact with partially hidden form elements - it makes it look like a malicious action is being done, even though in this case, it's obviously not malicious. – Nightfirecat Jan 30 '11 at 01:13
You're right - it will. It remains a working method of applying style to a file input though. – Michael Robinson Jan 30 '11 at 01:16

score 0 · Answer 2 · answered Jan 30 '11 at 01:05

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.

score -1 · Answer 3 · answered Jan 30 '11 at 06:35

-1

you can't !

you can use flash to simulate a file box.

answered Jan 30 '11 at 06:35

mier

704
4
3

How can I style input file textbox?

3 Answers3

Short Answer

Long Answer

Linked