Victor wrote:
div.photoUpload input.fileUpload { display:none; }
That's what you should start with. So are we making "custom" file
control with the real one hidden, eh?
Form control with display:none is ignored by IE, that is the problem.
If you are really targeted to give your visitors a visual impression
that someone is hacking their computer - in such case use the image or
iframe hack - so leave file control visible but cover it with an image
or iframe with something joyful (or blank).
Note
"visual impression that someone is hacking their computer" because no
one of major portals is hacking type="file" so an average user mostly
knows how does her upload button look like across her favorites. A
strangely looking upload button and *especially* automated File Dialog
popup correlates well with the spooky stories about Viruses and Hackers
which that average user read so many times about. The observed behavior
is a suspicion and - in many cases - a panic with the desire
immediately leave the site. This way from the usability point of view
the regular type="file" is the best. Maybe it will not have all these
carefully chosen nifty colors and thistles that your other form
controls have. From the other side you're getting something much more
important than that: a non-compromised trust from your visitor.
So remove display:none and use img or iframe cover instead. That still
works only for the browsers "trustful" enough to let you make virtual
clicks on file controls and read file control value - all with the
default security settings. Lucky Firefox is not one of them.
Enclosed a little test to check if the current UA allows to make
virtual clicks on file controls and to read their values run-time:
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body>
<form method="POST" action="" enctype="multipart/form-data">
<fieldset>
<legend>Demo</legend>
<label for="file01" accesskey="f"><u>F</u>ile:</label>
<input type="file" name="file01" id="file01">
<br>
<input type="button" value="Virtual click on File"
onclick="this.form.file01.click()">
<input type="button" value="Show File value"
onclick="window.alert(this.form.file01.value)">
</fieldset>
</form>
</body>
</html>