Chrome добавляет неожиданный отступ к вводу текста с помощью пользовательских стилей

Проблема заключается в overflow: visible !important для элементов <select>, определенных в таблице стилей агента пользователя. Вы не можете переопределить это правило с помощью CSS или встроенного стиля на самом элементе <select>.

Следующее правило CSS активно все время:

select:not(:-internal-list-box) {
    overflow: visible !important;
}

Если вы установите переполнение .my-custom-forms на visible (так же, как элемент <select>), все элементы управления получат одинаковые высота.

Таким образом, вы можете использовать следующее решение (используя ваш текущий код):

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

.my-custom-forms {
  font-family: 'Open Sans',serif;
}

select.my-custom-forms, input.my-custom-forms {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid lightblue;
  border-radius: 0;
  overflow: visible;
  padding: 0.25rem 0.1rem;
  transition: border 0.5s ease;
  width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container m-3">
  <div class="row">
    <div class="col-3">
      <select class="my-custom-forms">
        <option>Option</option>
      </select>
    </div>
    <div class="col-3">
      <select class="my-custom-forms">
        <option>Option</option>
      </select>
    </div>
    <div class="col-6">
      <input placeholder="text" class="my-custom-forms">
    </div>
  </div>
</div>

Я также рекомендую использовать классы .form-row и .form-control на соответствующих элементах. Теперь вы можете переопределить правило CSS select.form-control:not([size]):not([multiple]), чтобы высота элементов <select> не рассчитывалась и зависела от заданных padding:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

.my-custom-forms {
  font-family: 'Open Sans',serif;
}

select.form-control.my-custom-forms:not([size]):not([multiple]) {
  height: auto !important;
}

select.my-custom-forms, input.my-custom-forms {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid lightblue;
  border-radius: 0;
  overflow: visible;
  padding: 0.25rem 0.1rem;
  transition: border 0.5s ease;
  width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container m-3">
  <div class="form-row">
    <div class="col-3">
      <select class="form-control my-custom-forms">
        <option>Option</option>
      </select>
    </div>
    <div class="col-3">
      <select class="form-control my-custom-forms">
        <option>Option</option>
      </select>
    </div>
    <div class="col-6">
      <input class="form-control my-custom-forms" placeholder="text" type="text">
    </div>
  </div>
</div>

Всегда сложно переопределить стилей пользовательских агентов и достичь кросс-браузерного решения. Поскольку вы используете Bootstrap 4, где уже , что тяжелая работа была проделана; Вы можете просто использовать их.

Вы можете использовать класс form-control, который автоматически применяет эти стили (вы можете проверить, осмотрев элементы):

select.form-control:not([size]):not([multiple]) {
    height: calc(2.25rem + 2px);
}
.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

Так что вам просто нужно использовать класс form-control переопределить стилей пользовательского агента Chrome & amp; Firefox - см. Фрагмент:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container m-3">
  <div class="row">
    <div class="col-3">
      <select class="form-control">
        <option>Option</option>
      </select>
    </div>
    <div class="col-3">
      <select class="form-control">
        <option>Option</option>
      </select>
    </div>
    <div class="col-6">
      <input placeholder="text" class="form-control">
    </div>
  </div>
</div>

Разделить их.

select.my-custom-forms {
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    border-bottom: 2px solid lightblue;
    padding: .25rem .1rem .25rem .1rem;
    overflow: auto;
    width: 100%;
    background-color: transparent;
    transition: border .5s ease;
}

input.my-custom-forms {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid lightblue;
    padding: .25rem .1rem .25rem .1rem;
}