form-select specifies vertical-align: middle which causes alignment problems

[rmacfadyen]

There's a layout issue when using a SELECT and .form-select that "pushes" the SELECT "down" two pixels. This makes the alignment of INPUTs and a SELECTs incorrect.

A picture is probably better than my description

The underlying cause appears to be that .form-select has "vertical-align: middle" (v4 does not). Setting that to "vertical-align: initial" corrects the problem.

Alternatively, the problem might be with .form-control not having vertical-align: middle,

On v4 .form-select did not specify a vertical align.

OS: win10, Browser: Chrome 86, Firefox 83, Edge 87, Opera 72

Test case (v5 - fails): https://jsfiddle.net/1kc5osh4/3/

Test case (v4 - works): https://jsfiddle.net/fnau046c/

[mdo]

Both links you've shared show the same vertical alignment, albeit with different styling due to our custom appearance in v5. You are correct though, it does seem like we set this in v5 but no v4.

[alecpl]

@mdo Your comment is not clear. I can confirm the issue using above v5 test case in Firefox 83 and Chromium 86. The select is a couple of pixels lower than inputs. Looks to me as a real issue.

[mdo]

Ah I may have only checked Safari actually. Will check out later.