Browse button with input group is cropping on IE9

Question

Using bootstrap, I created input-group with a button and input type='file'.

It is working fine everywhere except IE9. On IE9 the browse button is being cropped from right side.

Demo: http://jsbin.com/alESiBo/6/edit

Code:

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">
      <i class="icon-upload-alt"></i>&nbsp;Upload
    </button>
  </span>
  <input id="fileField" class="form-control" name="fileField" type="file" />
</div>

Output:

IE 9.0.8112.16421

Chrome 31.0.1650.63 m

IE Version with snapshot:

Answer 1

What you are seeing ( the grey part ) is the 'browse..' part of the file upload in IE9. This is 'just the way it is' for the bootstrap css. As other answers have shown, if you do not like this, yeah, just need to have a look into making your own.

Add this in your head tag to prevent further mismatches though...

<meta http-equiv='X-UA-Compatible' content='IE=edge'/>

Most common is to set this control hidden ( I agree it always looks awful and inconsistent ) and 'trigger' it from your own fake button.

Lots of great links from other answers.

Answer 2

Like Rob Sedgwick said in his answer this is just the way the control looks in IE, and styling it is not really allowed.

But… you can cheat: make the file input disappear, and create your own fake input. Then redirect the relevant events using JS.

HTML

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">
      <i class="icon-upload-alt"></i>&nbsp;Upload
    </button>
  </span>
  <input id="fileField" class="form-control" name="fileField" type="file" />
  <span class="form-control form-control-overlay" id="fileFieldOverlay">Choose file</span>
</div>

CSS

.form-control[type="file"] {
  margin-bottom: -100%;
  opacity: 0;
}

.form-control-overlay {
  /* style, if you want */
  cursor: pointer;
}

Javascript

var fileFieldEl = document.getElementById("fileField");
var fileFieldOverlayEl = document.getElementById("fileFieldOverlay");

// On change of file selection, update display
fileFieldEl.onchange = function(ev) {
  // remove file path; it's a fake string for security
  fileFieldOverlayEl.innerText = ev.target.value.replace(/^.*(\\|\/)/, '');
};

// Redirect clicks to real file input
fileFieldOverlayEl.onclick = function() {
  fileFieldEl.click();
};

Run the code: http://jsbin.com/alESiBo/16/edit

Answer 3

add one more class :

bootstrap.css:3296

.input-group {position: relative; display: table; border-collapse: separate; width: 100%;}

try this may be it will be help you out.

Answer 4

Your code seems to work fine in IE9. http://fiddle.jshell.net/XCN83/1/show/

So, make sure your compatibility mode is not on. (see red circle in the attached image)

If not, some other css you have is affecting it, use the dev tools inspector to find styles applied to the file input box and it's parents working your way up.

Answer 5

I will suggest to use your own custom CSS to give same look and feel across the browser and same behavior across the browser. I have used similar approach to take care of this issue in my project. Following are same details also link of JSBIN for live demo.

HTML Code:

<!--Import button-->
    <div class="fileinput-button import-modal-select-file-btn" title="Import file">
        <!--Name of button -->    
        <span>Upload</span>
        <!-- Upload file control-->
        <input id="importFileUploadFileId" type="file" name="file" onchange="uploadFile(this);" />
        <!-- Any hidden field; Generally needed when upload button is part of form-->
        <input type="hidden" name="request" value="value"/>
    </div>

CSS Code (Please customize as per your need):

.fileinput-button {
border-radius: 5px;
padding-left: 10px;
padding-right: 10px;
background-color: #e7e9eb;
border: 1px solid #454b59;
font-family: "Gill Sans","Gill Sans MT","Helvetica Neue",Helvetica,Arial,sans-serif;
color: #454b59;
font-weight: lighter;
font-size: 16px;
cursor: pointer;
overflow: hidden;
position: relative !important;
background-image: none;
height: 30px;
outline: none;
height: 28.5px;
line-height: 28.5px;
}


.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
filter: alpha(opacity=0);
transform: translate(-300px, 0) scale(4);
font-size: 16px;
direction: ltr;
cursor: pointer;
}

.import-modal-select-file-btn {
width: 50px;
}

Following is live JSBIN link for your reference. http://jsbin.com/EWIGUrEL/1/edit

Hope it may help.