Chrome adds unexpected padding to text input with custom styling

Question

To put it simply, this fiddle works as expected on Firefox, but not on Chrome.

The input, which has the same styling as the select, should be the same height, but it doesn't on Chrome, how can I fix this?

Upon further inspection, it seems to be related to the overflow property, no idea why though

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

I'm using Bootstrap as a barebones, but unsure if it's related to the issue.

Answer 1

The problem is the overflow: visible !important for the <select> elements defined on the user agent stylesheet. You can't overide this rule with CSS or inline style on the <select> element itself.

The following CSS rule is active all the time:

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

If you set the overflow of the .my-custom-forms to visible (same as the <select> element) all controls get the same height.

---

So you can use the following solution (using your current code):

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

---

I also recommend to use the .form-row and .form-control classes on the corresponding elements. Now you can overide the CSS rule select.form-control:not([size]):not([multiple]) so the height of the <select> elements isn't calculated and depends on the specified 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>