Bootstrap-Eingang und wählen Sie Padding-Links-Cross-Browser Problem

Question

Ich benutze Bootstrap 3 und ich wünschte, dass die Padding-Eingabe und Auswahl Felder links ausgerichtet waren. In meiner Form überschrieben ich Bootstrap-Form-group-lg auf diese Weise

.form-group-lg .form-control { 
 
     letter-spacing: normal; 
 
     text-indent: 0.25em; 
 
     border-radius: 2px; 
 
     color: #555555; 
 
     font-size: 14px; 
 
     line-height: 1.42857; 
 
     min-height: 38px; 
 
     height: 58px; 
 
    } 
 
    .form-group-lg select.form-control { 
 
     height: 58px; 
 
     line-height: 58px; 
 
     padding-left 9px; /* force alignament with firefox, fail in IE e Chrome */ 
 
    }

<div class="row"> 
 
     <div class="col-md-12"> 
 
     <div class="form-group form-group-lg"> 
 
      <input class="form-control" name="name" placeholder="Name" type="text"> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-12"> 
 
     <div class="form-group form-group-lg"> 
 
      <select class="form-control" name="City" required=""> 
 
      <option>City</option> 
 
      </select> 
 
     </div> 
 
     </div> 
 
    </div>

Leider, dass ich bemerkt, wenn ich versuche, die padding-left in ausgewählten Bereich zu zwingen, mit der die Ausrichtung Eingabefeld wird in jedem Browser anders angezeigt.

Siehe das Beispiel mit verschiedenem Browser EXAMPLE

Gibt es eine Lösung für dieses Problem?

Answer 1

Verwendung text-indent Eigenschaft statt padding-left (es wird auf allen Browsern (getestet auf Chrome und Firefox)):

sehen Ihr Beispiel:

/* CSS used here will be applied after bootstrap.css */ 
 

 
.container { 
 
    width: 300px; 
 
    margin-top: 40px; 
 
} 
 
.form-group-lg .form-control { 
 
    /*padding: 10px 16px;*/ 
 
    letter-spacing: normal; 
 
    text-indent: 0.25em; 
 
    border-radius: 2px; 
 
    color: #555555; 
 
    font-size: 14px; 
 
    line-height: 1.42857; 
 
    min-height: 38px; 
 
    height: 58px; 
 
} 
 
.form-group-lg select.form-control { 
 
    height: 58px; 
 
    line-height: 58px; 
 
    text-indent: 29px; // use this instead of padding-left 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="form-group form-group-lg"> 
 
     <input class="form-control" name="name" placeholder="Name" type="text"> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-12"> 
 
     <div class="form-group form-group-lg"> 
 
     <select class="form-control" name="City" required=""> 
 
      <option>City</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>