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

Question

Проще говоря, эта скрипка работает как положено в Firefox, но не в Chrome.

Вход, имеющий тот же стиль, что и выбор, должен иметь ту же высоту, но это не относится к Chrome, как я могу это исправить?

При дальнейшей проверке, похоже, это связано со свойством переполнения, не знаю почему, хотя

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

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

Я использую Bootstrap в качестве основы, но не уверен, связано ли это с проблемой.

Answer 1

Всегда сложно переопределить стилей пользовательских агентов и получить кросс-браузерное решение.Поскольку вы используете 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 и 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>

Answer 2

Проблема в 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>

Answer 3

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

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