Styling HTML Input File Elements

It is almost impossible to make html input file elements look the same as the other parts of web applications. Browsers provide few possibilites to style them or nothing at all. However, within the newer versions of browsers, you might apply some tricks to alleviate this common styling problem, and one neat way, explaining how to style input file elements, is here.

The solution employs html/css and javascript in general, and position:relative, opacity, z-index features of CSS in particular. It places normal styled input and image, so that they overlap exactly with the input file element. Opacity of the input file is set to 0 and its z-index is set to 2, so that while it lies on top of normal styled input and image elements but as invisible, and apart from those it is totally clickable to user.

We have already made use of this neat trick in out JSF based web application while manipulated it a little bit to fit our current styling needs. The end result was very satisfying in terms of our customer.