Исправлено для ввода файлов Firefox с помощью Bootstrap 3.1?

Кнопка просмотра в селекторе файлов в Firefox проходит мимо границы с помощью 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>

Здесь скрипка: http://jsfiddle.net/vFt5K/

Есть ли у кого-нибудь элегантное решение?

Ответы

Ответ 1

Добавление

.form-control {
    height: auto;
}

для вашего css решит вашу проблему - я бы пометил его в дополнительном классе, чтобы убедиться, что он ничего не мешает.

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

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

JSFiddle

enter image description here

Ответ 2

Добавление ответа для других, подобных мне, которые создают свои входы с классом input-sm. Решение Ceili перезаписывает высоту, заданную классом input-sm, таким образом, делает ваши файлы более высокими, чем ваши другие входы.

Мое предлагаемое решение состоит в том, чтобы уменьшить верхнее и нижнее заполнение входных файлов, чтобы они соответствовали высоте других входов.

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

Используя @-moz-document url-prefix(), вы настроите таргетинг на класс только для Firefox. Подробнее об этом здесь.

Надеюсь, что это поможет кому-то.