Styling issues with a file input field in firefox

Question

Mornin' all!

Not entirely sure whats going on here, I am currently doing the front end for a site with looooads of forms, all styled up and looking pretty in IE, but I've just noticed that in firefox the file input fields aren't responding to any of my styles, all the other types of input fields are fine. I've checked it in Firebug and its associating the correct styles to it, but not changing how it looks.

If this isn't a complete brain fart on my behalf, then is this a known issue in firefox? And if so, how have I never noticed it before? :-O

Anyways, here is a sample of the code, if its of any use: :)

CSS:

form.CollateralForm input,
form.CollateralForm textarea
{
    width:300px;
    font-size:1em;
    border: solid 1px #979797;
    font-family: Verdana, Helvetica, Sans-Serif;
}

HTML:

<form method="bla" action="blah" class="CollateralForm">
   <input type="file" name="descriptionFileUpload" id="descriptionFileUpload" />
</form>

I've also tried applying a class to it but that doesn't work either,

any help would be muchly appreciated!

Answer 1

Styling file inputs is not really supported in most browsers, but it is possible with a bunch of workarounds.

PPK has written a nice article about this: http://www.quirksmode.org/dom/inputfile.html

Answer 2

Use cheat code ( # ) infront of the attribute of css class say:

form.CollateralForm input,
form.CollateralForm textarea
{
    width:300px;  //for firefox
    #width:200px; //for IE7
    _width:100px; //for safari
    font-size:1em;
    border: solid 1px #979797;
    font-family: Verdana, Helvetica, Sans-Serif;
}

Answer 3

This question is a duplicate. See:

http://stackoverflow.com/questions/269582/setting-uniform-input-typefile-width-in-all-browsers#269602