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

<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?

Answer 1

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

Answer 2

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.