I am styling an Input File type using only CSS, and it works on every browser expect Firefox 11.0. CSS:
label{
background:url(http://www.itilexamapp.com/images/upload.png) no-repeat 0 0;
padding:5px;
display:inline-block;
}
input[type="file"]
{-moz-opacity:0;
-webkit-opacity:0;
filter:alpha(opacity=0);
padding:6px;
width:200px;
}
HTML:
<label>
<input type="file" name="file_upload" />
</label>
You can see the code working here:
http://jsfiddle.net/kheema/PeXq9/7/
Here is the solution, add this to your styles. :
input[type="file"] {opacity: 0;}
I think Firefox 11 has stopped entertaining some of the vendor prefixes (-moz-opacity here) now.
Optionally, you could simplify it with:
<div id='label'><input type='file' size='1' class='upload'></div>
And the CSS being:
#label{
width: 100px;
height: 50px;
background: #fff url('YOURUPLOADIMAGE.png') no-repeat;
}
.upload{
opacity: 0;
font-size: 45px;
}
Of course, you would need to accomadate for browser support.