fix(form-field): native select outline not reset on firefox (#12967)

Currently we reset the focus outline for the `select` inside a form field for all browsers, however Firefox adds its own outline on top of it. These changes remove the extra Firefox outline since we have other focus indication already.

For reference:
![angular_material_-_mozilla_firefox_2018-09-03_22-08-46](https://user-images.githubusercontent.com/4450522/45000622-df53da00-afc6-11e8-8eb6-41716417025f.png)

src/lib/input/input.scss

@@ -131,9 +131,6 @@ $mat-native-select-arrow-svg: '' +
 
 // Remove the native select down arrow and replace it with material design arrow
 select.mat-input-element {
-  &::-ms-expand {
-    display: none;
-  }
   -moz-appearance: none;
   -webkit-appearance: none;
   position: relative;
@@ -149,6 +146,17 @@ select.mat-input-element {
     background-image: url($mat-native-select-arrow-svg);
   }
 
+  &::-ms-expand {
+    display: none;
+  }
+
+  // The `outline: none` from `.mat-input-element` works on all browsers, however Firefox also
+  // adds a special `focus-inner` which we have to disable explicitly. See:
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Firefox
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
   [dir='rtl'] & {
     background-position: left center;
   }