diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 371945ce706ff46b414385bfcbaa6e70e18e0e0c..8222a65b0f6de528de7204a0bb57919730e1d059 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -159,6 +159,16 @@ border-color: $custom-select-focus-border-color; outline: none; @include box-shadow($custom-select-focus-box-shadow); + + &::-ms-value { + // For visual consistency with other platforms/browsers, + // supress the default white text on blue background highlight given to + // the selected option text when the (still closed) <select> receives focus + // in IE and (under certain conditions) Edge. + // See https://github.com/twbs/bootstrap/issues/19398. + color: $input-color; + background-color: $input-bg; + } } // Hides the default caret in IE11 diff --git a/scss/_forms.scss b/scss/_forms.scss index 9a031c3ac2e6852d5bd41a162c2094dd8a6a9d3d..a64d9c54bd308829ccb2838ad23e058f029c3f10 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -60,6 +60,16 @@ select.form-control { &:not([size]):not([multiple]) { height: $input-height; } + + &:focus::-ms-value { + // Suppress the nested default white text on blue background highlight given to + // the selected option text when the (still closed) <select> receives focus + // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to + // match the appearance of the native widget. + // See https://github.com/twbs/bootstrap/issues/19398. + color: $input-color; + background-color: $input-bg; + } } // Make file inputs better match text inputs by forcing them to new lines.