Web Development

General discussion


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

By jkleinschmidt ·
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?

<input name="name" type="file" size="20">

This conversation is currently closed to new comments.

Thread display: Collapse - | Expand +

All Comments

Collapse -

no workaround

by cyberpac9 In reply to How to modify look of typ ...

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.

Collapse -

Workaround using two forms and JS

by tony In reply to How to modify look of typ ...

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.

<form name="frmSubmit" action="" method="post" enctype="multipart/form-data">
<div visibility=hide style="visibility:hidden">
<input type="file" name="fileResume" id="fileResume" size="#formSize#" class="widthResume">
<form name="frmTemp" id="frmTemp" action="" method="post">
<input type="text" name="txtFileName" id="txtFileName">
<img src="button_browse.gif" alt="Browse for file" title="" border="0" onclick="frmSubmit.fileResume.click();frmTemp.txtFileName.value=frmSubmit.fileResume.value">

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

Collapse -

Why use 2 forms

by robsutherland In reply to Workaround using two form ...

It seems to me to make more since to just hide the visibility of the <input type="file"> field instead of using 2 forms with a hidden <div>. The JavaScript would be about the same, but you avoid the confusion of multiple forms.


Related Discussions

Related Forums