Styling file inputs with CSS: problems and gotchas

Input files are considered by many web developers one of the most difficult topic to deal with using CSS. The basic problem with input files (form fields like input[type="file"]) lies in the fact that this kind of form fields has to do with sensitive information sent from clients to servers. In that vein, browsers tend to treat them very carefully. There are some gotchas to remember.

First, you cannot hide them with display: none or visibility: hidden without removing them entirely from the document. Browsers don't allow this technique. I've also tried a different approach using negative indentation and negative positioning by replacing the input field with an image. It works in some browsers, but not in all. Some browsers remove the element completely, so that you cannot select a file by clicking on the background image. The fact is that not all browsers consider the field active. In other words, if you click on the field without clicking on the "Browse" button, Firefox will prompt you a window to browse your filesystem, but not Internet Explorer. Further, things get more complicated in Safari, which has its own way to treat this kind of fields.

Second, most of the techniques proposed on the web work only on certain browsers but not on all. For example, an interesting technique proposed by Shaun Inman (very interesting indeed) makes use of CSS and JavaScript to replace a file input field with an image. This technique sets the opacity of the element to 0, so that it can be replaced by a background image. It works well on IE, Firefox and Safari, but it fails completely on Opera, because this browser, at the time of this writing, doesn't support the CSS properties related to opacity. I've also tried to find some information on a possible Opera extension called -o-opacity, but probably it doesn't even exist or it's not supported (or it has a different name).

Finally, always remember that browser default styles often take precedence over your styles. This is the case of Firefox, for example (you can check it out by opening the html.css and forms.css in your Firefox installation directory). Even worse, when browsers don't use their default stylesheet, they tend to use their own internal algorithms to handle this type of form elements. So be careful.

Leave a Reply

Note: Only a member of this blog may post a comment.