如何替换材料选择下拉菜单上的下拉箭头

【问题标题】：how to i replace the dropdown arrow on the material select dropdown如何替换材料选择下拉菜单上的下拉箭头
【发布时间】：2021-07-27 04:05:02
【问题描述】：

目前材料选择表单字段使用向下箭头，我相信它是通过 css 完成的。我想用不同类型的箭头替换它，我想就实现这一目标的最佳方法提出建议。这是我希望将原始版本转换为的内容：

原来是一个实心三角形，如https://material.angular.io/components/select/overview中所示

感谢您的建议！

【问题讨论】：

好吧，祝你好运！进入和改变最内部结构中的物质元素是困难的。不知道你会不会在这里成功。

标签： css angular select angular-material

【解决方案1】：

您必须了解：mat-select 的实心三角形不是图像，它只是纯 CSS（或本例中的 SCSS）。

就像使用 CSS 创建三角形和圆形一样。相同的程序。

如果你想改变样式、颜色等，可以通过以下方式进行：

:host {
  ::ng-deep
    mat-select.mat-select
    > div.mat-select-trigger
    > div.mat-select-arrow-wrapper
    > div.mat-select-arrow {
    color: red !important;
  }
}

在这里我更改了“颜色”属性。但是你也可以玩弄三角形的形状。

这里是堆栈闪电战：https://stackblitz.com/edit/angular-xkkagv?file=src%2Fapp%2Fselect-overview-example.scss

如果你想在没有::ng-deep 的情况下使用它，你可以在你的component.ts 文件中使用ViewEncapuslation.None 并玩转，事后看来，目前可能不是一个好的解决方案。

【讨论】：