Question

I have a problem of IE8 support with <input type="file"> on a php page displaying an image, which when clicked on opens a file browser to choose a file to upload.

This works fine with Firefox and Chrome and I am pretty sure the problem comes from <input type="file"> and its support with IE8. The result on IE8 is that the image does not get displayed and that if I click on the white rectangle sitting in place of the image nothing happens…

Here is the code:

<div class="file_wrap">
   <input id="file" type="file" name="file" onchange="sendfile();" />
</div>

And the CSS:

.file_wrap {
   background: url('icon/add.gif');
   overflow:   hidden;
   width:      116px;
   height:     147px;
   cursor:     hand;
}

.file_wrap input {
   opacity:    0;
   font-size:  999px;
   cursor:     hand;
}

Maybe some of you guys came across that before?

Answer 1

Custom styling of the <input type=file> element is explicitly discouraged.

Firstly, its default look and feel is completely different across the various browsers (you didn’t mention Safari, which also renders it very differently from the other browsers). This alone would make it quite hard to style it nicely.

But more importantly, most browsers actively prevent a number of standard CSS and Javascript actions from working with file elements, because of potentital security issues.

Some Javascript is prevented in order to avoid malicious scripts from intercepting or changing the filename and path. The implications of what could happen if this were allowed are fairly obvious.

In addition, the element generally only allows a fairly minimal amount of styling using CSS. This is because malicious pages were styling the element to make it look less like a file element, and thereby tricking users into uploading files that they shouldn’t have been uploading.

This page provides further reading on the subject, and gives tips on styling it successfully.

Hope that helps.