diff --git a/src/lib/input/input.scss b/src/lib/input/input.scss index 9946fc9584e..cfa5c592739 100644 --- a/src/lib/input/input.scss +++ b/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; }