使用Bootstrap 3.1修复Firefox文件输入？

Question

Firefox上文件选择器中的浏览按钮使用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>

这是小提琴:http://jsfiddle.net/vFt5K/

有没有人对此有一个优雅的解决方案？

Answer 1

添加

.form-control {
    height: auto;
}

你的CSS会解决你的问题 - 我会把它标记为另一个类,以确保它不会干扰其他任何事情.

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

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

的jsfiddle

Answer 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定位该类.更多关于这一点.

希望它可以帮助某人.