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
-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
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.