Styling an input type="file"

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 cur开发者_JAVA百科rently in design and not live to users yet and would like to solve this issue before it goes live if possible.

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;
 }

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.

I think I found two solutions to your problem. You are using: filter:alpha(opacity: 0) on your .file class, thus hiding the actual "Browse..." button you usually see in upload controls.

The first solution would be to use a conditional to set the CSS that will replace your fancy "Select" image with the normal yet styled "Browse" button when the user is using IE.

The second one would be to play with the size of the FileAttachment input and so the hidden "Browse..." button would fit in the position of the "Select" image. From there you just have to make sure that the z-index property of the button is higher than the one of the image.

Let me know if these solutions solve your needs.

:D

The reason they must double click is because that's the "text area."

The first image here is of an IE8 upload control. Note how there's the textbox and the button. The user single clicks the button OR double clicks the text box to bring up the button.

[ arg, sorry, my reputation is not high enough for pictures ]

When you're overlaying that, the text area is overlapping what you want to be single click, causing it to require a double click.

This next image is the same file upload control with no opacity, has a button over the top of it, and has an outline from IE8's DOM inspector. If I click the right most part of the blue rectangle a single click works, every where else requires a double. Also note the text editing caret overlayed from the file input ontop the button.

[ image omitted ]

The solution is to resize/position the file hidden file input to put the browse button where you want it.

Using some Bootstrap magic, I did it, is super easy.

Ok, after inserted the link to Bootstrap css in your head label, do this:

<div class="fileUpload btn btn-primary"> <span>Upload</span> <input type="file" class="upload" /> </div>

That will create an input type file, styled by the bootstrap css.

And now the tricky part:

  .fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

And that's all, now you have a functional button (input type file) with style.

I found this article because I had the same problem, you can check it for more info.

Basically it is not your problem actually IE takes a file upload control in different manner. It understand the file upload control as a textbox and input button, when you single click on file upload "Browse" or "select" button it opens open dialog box but when you single clicked on file upload text it focus the textbox and and then again click on this textbox it will open the open dialog box. It can say this is predefined bug in IE so we can't do anything in that and most of users know this problem.

If your trying to hide the default input button without loosing the default IE8 behavior on input file and also cross browser support try applying

input.file{
   width:0 ; 
   height:0;
}  //supposing your file input has class of .file`   

in the css and your good to go

It's been a while since I asked this question and below is the method I now use for styling file inputs. This info comes from Codrops. It goes into much more detail and provides several examples but here are the basics:

HTML

 <input type="file" name="file" id="file" class="inputfile" />
 <label for="file">Choose a file</label> 

NEED TO CHECK FOR JS

<html class="no-js">
  <head>
      <!-- remove this if you use Modernizr -->
      <script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script>
  </head>
</html>

CSS

.js .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.inputfile + label {
    max-width: 80%;
    font-size: 1.25rem;
    /* 20px */
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
    /* 10px 20px */
}

.no-js .inputfile + label {
    display: none;
}

.inputfile:focus + label,
.inputfile.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label * {
    /* pointer-events: none; */
    /* in case of FastClick lib use */
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    /* 4px */
    margin-right: 0.25em;
    /* 4px */
}

JS

;( function ( document, window, index )
{
    var inputs = document.querySelectorAll( '.inputfile' );
    Array.prototype.forEach.call( inputs, function( input )
    {
        var label    = input.nextElementSibling,
            labelVal = label.innerHTML;

        input.addEventListener( 'change', function( e )
        {
            var fileName = '';
            if( this.files && this.files.length > 1 )
                fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
            else
                fileName = e.target.value.split( '\\' ).pop();

            if( fileName )
                label.querySelector( 'span' ).innerHTML = fileName;
            else
                label.innerHTML = labelVal;
        });

        // Firefox bug fix
        input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
        input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
    });
}( document, window, 0 ));