Styling input type="file" with a box shadow

Question

I am using javascript to add a red glow using CSS box-shadow to form fields that are incorrectly filled. I am running into a problem with my file input field, in Firefox the glow extends around the browse button and I am also unable to remove the default border.

Is there a way to achieve this with CSS?

Thanks.

Here is an example -

HTML

<input type='file' id='userfile' name='userfile' maxlength='80' class='form-input'/>

CSS class being assigned

.field-error { -webkit-box-shadow: 1px 1px 5px 5px #ff0000; -moz-box-shadow: 1px 1px 5px 5px #ff0000; box-shadow: 1px 1px 5px 5px #ff0000; border: none; }

Answer 1

As far as I know the "Browse" button is completely inaccessible to CSS manipulation. You need some tricks to overcome this issue. I recommend you take a look at this article:

• http://www.quirksmode.org/dom/inputfile.html

Or use jQuery alternative:

• http://www.appelsiini.net/projects/filestyle