Web Development·11,950 discussions

How to modify look of type=”file” input?

Locked

Does anyone know how to specify css button attributes for the type=”file” input field? Any class I use gets applied to both the input field AND button, when I want to modify the button and text box separately.
Any idea of how to target those elements individually when using this tag?

Topic

no workaround

In reply to How to modify look of type=”file” input?

According to the CSS2 Specs from W3C you cannot apply CSS attributtes to this element. The element has been replaced. Take a look at Appendix A for from the CSS2 specs and at this page here http://www.w3.org/TR/REC-CSS2/conform.html#replaced-element.

Workaround using two forms and JS

In reply to How to modify look of type=”file” input?

We did find a workaround using two frames that works in IE, but we had to write a separate section of code for other browsers.

It uses a hidden input type=”file” tag and a visible text input tag. When you click the browse image, it triggers the click of the file input tag. The text input field then gets set to the value of the file input tag.

It was difficult to make it work, but it passed the proof-of-concept phase.

Tony Brandner

Why use 2 forms

In reply to Workaround using two forms and JS

It seems to me to make more since to just hide the visibility of the field instead of using 2 forms with a hidden

. The JavaScript would be about the same, but you avoid the confusion of multiple forms.

Rob

[Author]

Replies