McGrady's technique is elegant in its simplicity:
- Take a normal <input type="file"> and put it in an element with position: relative.
- To this same parent element, add a normal <input> and an image, which have the correct styles. Position these elements absolutely, so that they occupy the same place as the <input type="file">.
- Set the z-index of the <input type="file"> to 2 so that it lies on top of the styled input/image.
- Finally, set the opacity of the <input type="file"> to 0. The <input type="file"> now becomes effectively invisible, and the styles input/image shines through, but you can still click on the "Browse" button. If the button is positioned on top of the image, the user appears to click on the image and gets the normal file selection window.
Until here the effect can be achieved through pure CSS. However, one feature is still lacking.
The HTML/CSS Structure
I've decided on the following HTML/CSS approach:
<input type="file" class="file" />
<img src="search.gif" />