Select: Uneven padding in Chrome 83

OS: Mac OS X Catalina Chrome 83 (Chrome 81 in BrowserStack)

The padding on the select form control looks really asymmetrical. Specifically, the dropdown arrow is butting up against the right side of the component, whereas there’s a decent amount of padding on the left side. This is Chrome 83. Looking at Chrome 81 (via browserstack), the select menu has a different drop arrow. Though the right-side padding is marginally, if at all, greater in 81, the left padding is much greater in 83, giving a very jarring asymmetrical look.

This is almost certainly related to the updated form control UI in Chrome 83.

You can see it in the example in the Bootstrap docs.

I’ve uploaded screenshots to imgur. This should be reproducible in browserstack.

[patrickhlauke]

The black outline is likely due to the recent improvements to Chrome’s focus ring https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html - and yes, I believe currently it can’t be overridden via CSS (though focus indication can be modified for form controls themselves…just not the actual select’s dropdown which is pretty much under the sole control of the browser and offers little to no styling hooks) [edit: ah i see the thread starter already mentioned the UI changes in Ch83 … sorry for restating the obvious]

[mdo]

Will have to look to see what we can do for v4 since we only have custom forms in v5.