skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Removes the chevron icon from native selects in multiple mode, because they're rendered inline.
This commit is contained in:
Kristiyan Kostadinov
2018-09-14 15:51:11 +02:00
committed by Jeremy Elbourn
parent 50be24bad9
commit b62343a237
1 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/input/input.scss
+12 -5
View File
@@ -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;
}