Styling an input type="file"

Question

I have read about this from several places.

I have tried the method found here: http://www.quirksmode.org/dom/inputfile.html

I could not get it to work. So I tried a CSS/HTML method and it works beautifully in Firefox, Chrome, Safari, and Opera (all latest versions) but does not in (you guessed it) IE8.

It looks fine, when you single click it, it doesn't work. If you double click it it works.

Any ideas how to get this to work with a single click?

Currently I am using IE conditional comments to tell users with IE to double click the select button. The site is currently in design and not live to users yet and would like to solve this issue before it goes live if possible.

Answer 1

A nice solution which allows you to make single click work is to use a label element, and its property "for" which allows you to connect it to the input. Another important element of this solution is to apply filter:alpha(opacity=0) on the input element.

HTML:

 <label for="fileupload"> 
     <input id="fileupload" type="file" >   
     <p>click here</p>
 </label>

CSS:

label {
   background-color: #ECECEC;
   display: block;
   width: 600px;
   height: 600px;
   cursor: pointer;
}

input[type="file"] {
   width: 100%;
   height: 100%;
   z-index: 100;
   position: relative;
   opacity: 0;
   filter:alpha(opacity=0); 
   cursor: pointer;
 }

Answer 2

I got a solution that will help you style the button how you wish and keep it to one click in all browsers too.

Basically create a div and give it a class or id, for examples sake lets call this "outer_div".

Then place your file input inside the "outer_div" and also give it an id, for this example lets call it "file_input_name".

Next comes the CSS...

For the "outer_div" give it the following properties

    #outer_div{
    cursor:pointer;
    overflow:hidden;
    display:block;
    float:left;
    position:relative;
    width:83px;
    height:25px;
    background:url(your button image goes here) no-repeat; 
    }

Make sure your button has the same width properties for this to work.

Next the CSS for file_input_name:

  #file_input_name{
position:relative;
float:left;
cursor:pointer;
right:138px;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
text-align: right;
        }

This should do the trick. Basically what's happening is we are putting the file input so that the browse button is above your background image instead of where the file URL is.

I have done this my self and it works in IE and Firefox / safari / chrome.

Let me know how you get on or if you need more help.