Korrektur für Firefox-Dateieingabe mit Bootstrap 3.1?

Question

die Schaltfläche Durchsuchen in der Dateiauswahl auf Firefox erstreckt sich über die Grenze Bootstrap mit 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> 

Hier ist die Geige: http://jsfiddle.net/vFt5K/

Ist dies eine elegante fix jemand haben?

Answer 1

Hinzufügen

.form-control { 
    height: auto; 
} 

zu Ihrem CSS wird Ihr Problem lösen - ich habe es zu einer weiteren Klasse markieren würde, nur um sicherzustellen, dass es nicht mit irgendetwas anderes nicht zuwiderläuft.

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

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

JSFiddle

Answer 2

eine Antwort für andere wie mich hinzufügen, die ihre Eingänge mit der input-sm Klasse Stil. Ceilis Lösung überschreibt die von der Klasse input-sm festgelegte Höhe und rendert somit Ihre Dateieingaben höher als Ihre anderen Eingaben.

Meine vorgeschlagene Lösung besteht darin, das obere und untere Padding der Dateieingabe so zu reduzieren, dass sie der Höhe der anderen Eingaben entspricht.

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

von @-moz-document url-prefix() verwenden, müssen Sie die Klasse nur für Firefox Ziel. Mehr dazu here.

Ich hoffe, es hilft jemandem.