Tuesday, August 05, 2008

Styling form file input

Due to certain security considerations, it is very difficult to change the style of file input.
Here is a good post on how to do it.

Following is quoted from above article:
  1. Take a normal < type="file">
  2. To this same parent element, add a normal <> and an image, which have the correct styles. Position these elements absolutely, so that they occupy the same place as the < type="file">.
  3. Set the z-index of the < type="file"> to 2 so that it lies on top of the styled input/image.
  4. Finally, set the opacity of the < type="file"> to 0. The < 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.
    (Note that you can't use visibility: hidden, because a truly invisible element is unclickable, too, and we need the < type="file"> to remain clickable)
  5. When the user has selected a file, the visible, fake input field should show the correct path to this file, as a normal < type="file"> would. It's simply a matter of copying the new value of the < type="file"> to the fake input field, but we need JavaScript to do this.

No comments: