v5: Inputs and Selects are slightly misaligned in Floating Forms

[TechOverflow]

• macOS 10.15.7
• Safari 14.0.3
• https://codepen.io/Fyod/pen/OJRZgRL

There is a slight misalignment, probably due to padding-top. I have not tested in other browsers.

[TechOverflow]

Temporary fix:

.form-select {
  line-height: 1.25em;
}

[alecpl]

I confirm this is related to line-height (and maybe appearance). In Chrome the letter "g" in select is cut.

[Shifrin]

Temporary fix:

.form-select {
  line-height: 1.25em;
}

I checked in Chrome by applying this fix, it doesn't work for me. But I can able to fix it by setting padding-bottom: .425rem.

So is it really a line-height issue @alecpl?

[alecpl]

.form-floating > .form-select {
  line-height: 1.25rem;
}

works for me. Interestingly setting such a line-height value on an input field does not change anything, but for selects it makes a difference.

[jaxramus]

yeah this is still happening even on the latest version: https://stackblitz.com/edit/hxnclf?file=index.html