Bootstrap input and select padding-left cross browser issue

Question

I'm using Bootstrap 3 and I wish the padding input and select fields were left aligned. In my form I overwritten bootstrap form-group-lg in this way

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

Unfortunately I noticed that if I try to force the padding-left in select field to align with that of the input field is displayed differently in each browser.

See the example with different browser EXAMPLE

Is there any solution to this problem?

native elements are paint, you can try this for chrome, but it takes away the carets http://stackoverflow.com/questions/22681141/select-option-padding-not-working-in-chrome — inubs, Sep 05 '16 at 16:35

score 1 · Accepted Answer · answered Sep 05 '16 at 16:44

use text-indent property instead of padding-left (it will work on all browsers(tested on chrome and firefox)):

see your example:

/* 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>

Bootstrap input and select padding-left cross browser issue

1 Answers1