Fix for Firefox File Input using Bootstrap 3.1?

Question

The browse button in the file selector on Firefox extends past its border using Bootstrap 3.1

enter image description here

<div class="panel" role="form">
    <div class="container-fluid form-horizontal">
        <div class="row form-group">
            <div class="col-xs-12">
                <input type="file" class="form-control" />
            </div>
        </div>
    </div>
</div>

Here's the fiddle: http://jsfiddle.net/vFt5K/

Does anybody have an elegant fix for this?

score 51 · Accepted Answer · answered Feb 26 '14 at 18:24

51

Adding

.form-control {
    height: auto;
}

to your css will solve your problem -- I would tag it to an additional class just to make sure it didn't interfere with anything else.

<input type="file" class="form-control my-form-control" />

.form-control.my-form-control {
    height: auto;
}

JSFiddle

enter image description here

answered Feb 26 '14 at 18:24

Ceili

1,308
1
11
17

+1. While this works it messes up vertical alignment for any other cells the row. – Spencer Ruport Feb 26 '14 at 18:32
Whoops. After some experimenting I realized my vertical alignment issue was due to something else. Great answer :D – Spencer Ruport Feb 26 '14 at 18:59

score 6 · Answer 2 · edited May 23 '17 at 12:26

Adding an answer for others like me who style their inputs with the input-sm class. Ceili's solution overwrites the height set by the input-sm class, thus renders your file inputs taller than your other inputs.

My proposed solution is to reduce the file input's top and bottom padding to match the height of the other inputs.

<input type="file" class="form-control input-sm input-file-sm">

/* For Firefox only */
@-moz-document url-prefix() {
    .input-file-sm {
        height: auto;
        padding-top: 2px;
        padding-bottom: 1px;
    }
}

By using @-moz-document url-prefix(), you'll target the class only for Firefox. More on that here.

Hope it helps someone.

Fix for Firefox File Input using Bootstrap 3.1?

2 Answers2