CSS styling on Input File type - 【StackMirror】|css

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/~~

2012-04-04 05:51
by Kheema Pandey

Please, please don't ever do anything like that. For one thing, you can't possibly assume that all browsers will do it like that. How will your code work with old browsers like IE8? How will it work with mobile browsers? How will it work with browsers you don't know about - Chris Morgan 2012-04-04 05:54

possible duplicate of Styling <input type="file">Chris Morgan 2012-04-04 06:02

By the way, there are lots of duplicates. Lots and lots - Chris Morgan 2012-04-04 06:02

I'd also avoid styling them at all. Also, you know the text field isn't populated with the filename (which it normally is), right? So why even have it in the image - powerbuoy 2012-04-04 06:07

I am totally agree with Chris comments. I must think about the linux browser and consider the opera browser. I think the good and acceptable solution is I must use uniform.js jquery library to work in every browser - Kheema Pandey 2012-04-04 06:18

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.

2012-04-04 06:02
by anuj_io

thanks buddy you are right..now its works on Firefox as well - Kheema Pandey 2012-04-04 06:13

thanks for your help TEA_Totaler : - Kheema Pandey 2012-04-04 06:22

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.

2012-04-10 13:17
by NoName