Custom select focus glow not correct/consistant.

[Bodom78]

Live example can be see on the docs page https://getbootstrap.com/docs/4.0/components/forms/#select-menu

When you focus the glow is not consistant with other inputs.

Valid and Invalid apply the correct focus glow when I add the classes via console.

[Bodom78]

bootstrap/scss/_variables.scss

Line 499 in c381d19

$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;

Should be

$custom-select-focus-box-shadow:    $input-focus-box-shadow !default;

Or

$custom-select-focus-box-shadow:    $input-btn-focus-box-shadow !default;

[victorwpbastos]

Same here

[MoritzBru]

Also visible in the screenshots that firefox does not respect the outline: 0; on select when you use the keyboard to focus :(
However there is a really hacky way to get rid of it: https://stackoverflow.com/questions/3773430/remove-outline-from-select-box-in-ff/18853002#18853002

[martinbean]

As well as the “glow” styling not being consistent, custom selects don’t have an inner shadow when $enable-shadows is true, leading it to look inconsistent to other input types on the same page: