From 2eea143786d36dab6778f1638f7cfd5d270551e5 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 28 Jun 2018 12:56:56 -0400
Subject: [PATCH] Get rid of terrible IE highlight when select is focused

---
 src/components/form/_mixins.scss        | 15 +++++++--------
 src/components/form/select/_select.scss |  5 +++++
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss
index bb06bb87483..cde9ea7e398 100644
--- a/src/components/form/_mixins.scss
+++ b/src/components/form/_mixins.scss
@@ -2,13 +2,13 @@
 @function euiFormControlGradient($color: $euiColorPrimary) {
   @return linear-gradient(to top,
     $color,
-    $color ($euiSizeXS / 2),
-    transparent ($euiSizeXS / 2),
+    $color 2px,
+    transparent 2px,
     transparent 100%
   );
 }
 
-/*
+/**
  * 1. Ensure the icon padding remains when in readOnly mode
  */
 
@@ -107,8 +107,9 @@
 }
 
 /**
- * 1. Override invalid state with focus state.
+ * 2. Override invalid state with focus state.
  */
+
 @mixin euiFormControlStyle($borderOnly: false, $includeStates: true) {
   @include euiFormControlSize;
   @include euiFormControlDefaultShadow($borderOnly);
@@ -132,11 +133,11 @@
   }
 
   @if ($includeStates) {
-    &:invalid { /* 1 */
+    &:invalid { /* 2 */
       @include euiFormControlInvalidStyle;
     }
 
-    &:focus { /* 1 */
+    &:focus { /* 2 */
       @include euiFormControlFocusStyle($borderOnly);
     }
 
@@ -151,9 +152,7 @@
 
 }
 
-//
 // Custom styles and states for checkboxes and radios
-//
 
 @mixin euiCustomControl($type: null, $size: $euiSize){
 
diff --git a/src/components/form/select/_select.scss b/src/components/form/select/_select.scss
index 7ae8163c689..6b3933fa782 100644
--- a/src/components/form/select/_select.scss
+++ b/src/components/form/select/_select.scss
@@ -22,4 +22,9 @@
   &::-ms-expand {
     display: none;
   }
+
+  &:focus::-ms-value {
+    color: $euiTextColor;
+    background: transparent;
+  }
 }