fix(form-field): remove chevron from native multi-select (#13009)

Removes the chevron icon from native selects in multiple mode, because they're rendered inline.

Author: crisbeto

src/lib/input/input.scss

@@ -122,10 +122,12 @@ textarea.mat-input-element {
   margin: -2px 0;
 }
 
-// Encoded material design select arrow svg
-/* stylelint-disable max-line-length */
-$mat-native-select-arrow-svg: 'data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2210%22%20height%3D%225%22%20viewBox%3D%227%2010%2010%205%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%230%22%20fill-rule%3D%22evenodd%22%20opacity%3D%22.54%22%20d%3D%22M7%2010l5%205%205-5z%22%2F%3E%3C%2Fsvg%3E';
-/* stylelint-enable */
+// URL-encoded Material Design select arrow SVG.
+$mat-native-select-arrow-svg: '' +
+  'data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2210%22%20height%3D%225%22%20' +
+  'viewBox%3D%227%2010%2010%205%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fs' +
+  'vg%22%3E%3Cpath%20fill%3D%22%230%22%20fill-rule%3D%22evenodd%22%20opacity%3D%22' +
+  '.54%22%20d%3D%22M7%2010l5%205%205-5z%22%2F%3E%3C%2Fsvg%3E';
 
 // Remove the native select down arrow and replace it with material design arrow
 select.mat-input-element {
@@ -136,12 +138,17 @@ select.mat-input-element {
   -webkit-appearance: none;
   position: relative;
   background-color: transparent;
-  background-image: url($mat-native-select-arrow-svg);
   background-repeat: no-repeat;
   display: inline-flex;
   box-sizing: border-box;
   background-position: right center;
 
+  // Native multi-selects are rendered inline which
+  // means that they shouldn't have a dropdown arrow.
+  &:not([multiple]) {
+    background-image: url($mat-native-select-arrow-svg);
+  }
+
   [dir='rtl'] & {
     background-position: left center;
   }