Skip to content

Commit

Permalink
fix(material/select): arrow not rendering correctly in high contrast …
Browse files Browse the repository at this point in the history
…mode

Since all borders get rendered out in high contrast mode, we can't use a CSS triangle to
render out the `mat-select` dropdown arrow. These changes replace it with an SVG arrow.

Fixes #14207.
  • Loading branch information
crisbeto committed Jan 15, 2021
1 parent 73d570a commit ed0a833
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 6 deletions.
9 changes: 8 additions & 1 deletion src/material/select/select.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,14 @@
</span>
</div>

<div class="mat-select-arrow-wrapper"><div class="mat-select-arrow"></div></div>
<div class="mat-select-arrow-wrapper">
<!-- Use an inline SVG, because it works better than a CSS triangle in high contrast mode -->
<div class="mat-select-arrow">
<svg viewBox="0 0 24 24" width="24px" height="24px" focusable="false">
<path d="M7 10l5 5 5-5z"/>
</svg>
</div>
</div>
</div>

<ng-template
Expand Down
16 changes: 11 additions & 5 deletions src/material/select/select.scss
Original file line number Diff line number Diff line change
Expand Up @@ -75,12 +75,18 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
}

.mat-select-arrow {
width: 0;
height: 0;
border-left: $mat-select-arrow-size solid transparent;
border-right: $mat-select-arrow-size solid transparent;
border-top: $mat-select-arrow-size solid;
margin: 0 $mat-select-arrow-margin;
width: $mat-select-arrow-size * 2;
height: $mat-select-arrow-size;
position: relative;

svg {
fill: currentColor;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}

.mat-select-panel-wrap {
Expand Down

0 comments on commit ed0a833

Please sign in to comment.