CSS - Why file upload control doesn't follow the CSS width rule?

Question

Hello all,

I have the following HTML code:

<input type='file' class="" maxlength="96" size="16" value="" name='headshot' id='headshot' style="width:21.5em;"/>

It seems that the "size" value controls the real width of the "headshot" rather than CSS. In order to make it a idea width, I have to use the following code:

<input type='file' class="" maxlength="96" size="32" value="" name='headshot' id='headshot' style="width:21.5em;"/>

Do you know why CSS here doesn't work? I have tested the above code in Firefox 3.6.8.

Thank you

Answer 1

You could try removing the size attribute. I forget if it's required for validation or not, however...

Answer 2

I agree with the above answer, I don't believe the size attribute is required for validation (although it may depend on which DTD you use). However have you tried using the !important value? It is intended for essentially saying that this is the supreme CSS value for this item, but it may work in this case. Its worth a shot.

Answer 3

Fortunately, reader Michael McGrady invented a very neat trick that allows us to (more or less) style file upload fields

See here: http://www.quirksmode.org/dom/inputfile.html