Suppress IE/Edge additional white/blue colors for focused <select>

2 files changed, 20 insertions, 0 deletions

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 371945ce7..8222a65b0 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 9a031c3ac..a64d9c54b 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.