From ab44d50f5fb4383beaf43df9ad2c4f6cdc1fc305 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 2 Oct 2018 22:21:43 +0200
Subject: [PATCH] fix(form-field): blue box inside focused native select on IE
 (#13187)

Resets the blue box that the user agent draws inside focused `select` elements in IE11.
---
 src/lib/input/input.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/lib/input/input.scss b/src/lib/input/input.scss
index a074eea6546..e409e91f25b 100644
--- a/src/lib/input/input.scss
+++ b/src/lib/input/input.scss
@@ -152,6 +152,16 @@ select.mat-input-element {
   &::-moz-focus-inner {
     border: 0;
   }
+
+  // As a part of its user agent styling, IE11 has a blue box inside each focused
+  // `select` element which we have to reset. Note that this needs to be in its own
+  // selector, because having it together with another one will cause other browsers
+  // to ignore it.
+  &::-ms-value {
+    // We need to reset the `color` as well, because IE sets it to white.
+    color: inherit;
+    background: none;
+  }
 }
 
 .mat-form-field-type-mat-native-select {