Fix floating label text cut off in select elements

[theodorejb]

Description

Tweaks line height and padding so that letters with descenders will not be cut off when using a floating label on a <select> element.

Motivation & Context

In Bootstrap 5.3.3 floating labels cause the bottom of some letters like j, g, p, and y to be cut off. This occurs with normal form-select dropdowns in Firefox and Chrome/Edge, and the problem gets significantly worse when using form-select-lg, such that this class is unusable with floating labels in all browsers (including Safari).

• Demo: https://stackblitz.com/edit/bs-select-floating-label?file=index.html
• Screenshot:
  

Type of changes

• Bug fix (non-breaking change which fixes an issue)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation

Live previews

• https://deploy-preview-39483--twbs-bootstrap.netlify.app/docs/5.3/forms/floating-labels/#selects

Related issues

Fixes #33711, fixes #34147

[mdo]

Unfortunately I think these are somewhat arbitrary values that make our components a little more cumbersome to tweak. I'd rather see us go the route of an improved, balanced vertical padding for both top and bottom vs separate values for both.

[theodorejb]

@mdo Do you mean using the same top/bottom padding for both selects and inputs? I tried that first, and while the new values do work fine for input elements, they do not work for textareas (it causes the label to overlap the textarea contents).

[theodorejb]

I changed the approach to use consistent padding for input and select elements, and only override it for textareas.

Note that the increase to line height is necessary to fix the floating label text cutoff issue for select dropdowns. For textareas it also makes the line height more similar to the default line height of 1.5 on textareas without floating labels.

[theodorejb]

I rebased this on top of #39720 since that was approved. I hope this can also make it into a bugfix release.

[theodorejb]

Is there any chance this can be reviewed/merged? It fixes an important issue for select inputs with floating labels.

[louismaximepiton]

I've been trying some other ideas that came to my mind but I couldn't find any better way to do it. I'm fine adding the Sass variables, I'm a bit more worried about the CSS variables that increase the size of the bundle.

Maybe we could calculate the paddings using the existing variables but I'm not sure it would be very handy as well.

Just a quick correction on the line-height to keep the correction very specific.

[louismaximepiton]

Fine with the actual on my side since it's better than it was. Still not a big fan of the line-height tweak since it introduces a default scroll for textareas but can't think of another way for now.