fix(select): Remove blue background in IE on focus (#3497)

Fixes #3496
material-components · Sep 5, 2018 · 1eb86cc · 1eb86cc
1 parent 8c25ed5
commit 1eb86cc
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 20 deletions.
diff --git a/packages/mdc-select/mdc-select.scss b/packages/mdc-select/mdc-select.scss
@@ -66,6 +66,11 @@
       display: none;
     }
 
+    &::-ms-value {
+      background-color: transparent;
+      color: inherit;
+    }
+
     // counteracts the extra text padding that Firefox adds by default
     @-moz-document url-prefix("") {
       text-indent: -2px;

diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
@@ -405,21 +405,21 @@
     }
   },
   "spec/mdc-select/classes/disabled.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/05/08_47_52_369/spec/mdc-select/classes/disabled.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/09/05/21_09_40_395/spec/mdc-select/classes/disabled.html?utm_source=golden_json",
     "screenshots": {
       "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/05/08_47_52_369/spec/mdc-select/classes/disabled.html.windows_chrome_68.png",
       "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/05/08_47_52_369/spec/mdc-select/classes/disabled.html.windows_edge_17.png",
       "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/05/08_47_52_369/spec/mdc-select/classes/disabled.html.windows_firefox_61.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/05/08_47_52_369/spec/mdc-select/classes/disabled.html.windows_ie_11.png"
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/09/05/21_09_40_395/spec/mdc-select/classes/disabled.html.windows_ie_11.png"
     }
   },
-  "spec/mdc-select/issues/3230.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/28/00_57_26_335/spec/mdc-select/issues/3230.html",
+  "spec/mdc-select/issues/3230-3496.html": {
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/05/07_46_19_171/spec/mdc-select/issues/3230-3496.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/28/00_57_26_335/spec/mdc-select/issues/3230.html.windows_chrome_68.png",
-      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/28/00_57_26_335/spec/mdc-select/issues/3230.html.windows_edge_17.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/28/00_57_26_335/spec/mdc-select/issues/3230.html.windows_firefox_61.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/28/00_57_26_335/spec/mdc-select/issues/3230.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/05/07_46_19_171/spec/mdc-select/issues/3230-3496.html.windows_chrome_68.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/05/07_46_19_171/spec/mdc-select/issues/3230-3496.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/05/07_46_19_171/spec/mdc-select/issues/3230-3496.html.windows_firefox_61.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/05/07_46_19_171/spec/mdc-select/issues/3230-3496.html.windows_ie_11.png"
     }
   },
   "spec/mdc-select/mixins/bottom-line-color.html": {

diff --git a/...reenshot/spec/mdc-select/issues/3230.html → ...hot/spec/mdc-select/issues/3230-3496.html b/...reenshot/spec/mdc-select/issues/3230.html → ...hot/spec/mdc-select/issues/3230-3496.html
@@ -26,25 +26,22 @@
     <title>Issue 3230 - MDC Web Screenshot Test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="../../../out/mdc.select.css">
+    <link rel="stylesheet" href="../../../out/mdc.typography.css">
     <link rel="stylesheet" href="../../../out/spec/fixture.css">
     <link rel="stylesheet" href="../../../out/spec/mdc-select/fixture.css">
-
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-      gtag('config', 'UA-118996389-2');
-    </script>
   </head>
 
-  <body class="test-container">
+  <body class="test-container mdc-typography">
     <main class="test-viewport test-viewport--mobile">
       <div class="test-layout">
 
-        <!-- This tests that the outlined select will still turn the primary color when it does not have a floating label -->
-        <!-- See https://github.com/material-components/material-components-web/issues/3230 -->
+        <!--
+          This page tests the following regressions:
+          1.  Outlined select should still turn the primary color when it does not have a floating label.
+              https://github.com/material-components/material-components-web/issues/3230
+          2.  IE's default blue background should be hidden on focus.
+              https://github.com/material-components/material-components-web/issues/3496
+        -->
         <div class="test-cell test-cell--select">
           <div class="mdc-select mdc-select--outlined">
             <select class="mdc-select__native-control" id="my-select" autofocus>