CSS styling on Input File type

Question

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/

Answer 1

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.