Of all form
fields, the file upload field is by far the worst when it comes to styling. Explorer Windows offers some (but
not many) style possibilities, Mozilla slightly less, and the other browsers none at all. The "Browse" button, especially, is completely inaccessible to CSS manipulation
The designer wanted the same styles, plus a "Select" image, to apply to all file upload fields. When I applied the rules of normal input fields to file upload fields, though, it didn't really work. There were wild differences between the browsers, and styling the default button is totally impossible.
This is hardly what anyone would call a nicely designed form field. Until recently, though, it was the best we could do.
Also note Safari's fundamentally different approach. The Safari team has probably decided on this approach to disallow the manual entering of a file name and this avoid exploits like this one . The drawback is that the user can't decide not to upload a file after having selected one.div.fileinputs { position: relative;}div.fakefile {position: absolute;top: 0px;left: 0px;z-index: 1;}input.file {position: relative;text-align: right;-moz-opacity:0 ;filter:alpha(opacity: 0);opacity: 0;z-index: 2;}<div class="fileinputs"><input type="file" class="file" /><div class="fakefile"><input /><img src="search.gif" /></div></div>