styled file input button in IE8

What I needed was a styled “Upload Image” Button, therefore I could not use the standard input type=”file”. So I included it in the HTML but hid it like this:

input[type="file"]#imagefile{
visibility:hidden;
width:0;
height:0;
}

The styled button is a label with for=”imagefile”, to automatically invoke the file upload on click. And since I wanted to submit the form right after selecting an image, the file element had an additional onchange event:

<input id="imagefile" type="file" name="imagefile" onchange="$('#formid').submit();" />

So every normal browser sent the form right after choosign an image. But this did not work in IE8. Internet Explorer 8 just wouldn’t submit the form, there was no error message, no clue as to why that didn’t work.
Turns out a label doesn’t do what its supposed to do in IE8 as long as the input element is set to hidden. So I left width and height to 0 but changed the visibility for IE8:

input[type="file"]#imagefile{
visibility:visible;
}

Makes it work like a charm!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.