Question

除了默认下拉菜单外，如何将mat-select-arrow更改为另一个图标？

我尝试过各种迭代

.mat-select-arrow {
    icon: url('/assets/images/keyboard_arrow_down.png');
    content: icon;
}

Chrome开发者工具的计算窗口似乎未列出与箭头类型相对应的任何属性。

Answer 1

有两种方法可以实现角材料的自定义css：

方法1）通过禁用viewencapsulation：

import { Component, OnInit, **ViewEncapsulation** } from '@angular/core';
import { MatTabChangeEvent } from '@angular/material/tabs';

@Component({
  selector: 'app-sample-component',
  templateUrl: './sample-component.component.html',
  styleUrls: ['./sample-component.component.css'],
  encapsulation: ViewEncapsulation.None  // *** This line disables the view encapsulation
})

export class SampleComponent implements OnInit {
}

优势： 您可以直接在sample-component.component.css中覆盖材质类的属性，例如：

.mat-tab-label {
    width: 33.3%;
    height: 55px !important;
}

.mat-ink-bar {
    background-color: #0a4963;
}

/*** To change the arrow color ****/
.mat-select-arrow {
  border-top: 5px solid rgb(10, 73, 99);
}

方法2）传统方式（不禁用封装）（避免）：

优势：无需更改组件在component.component.css中进行更改，例如：

::ng-deep .mat-tab-label {
    width: 33.3%;
    height: 55px !important;
}

::ng-deep .mat-ink-bar {
    background-color: #0a4963;
}

/*** To change the arrow color ****/
::ng-deep .mat-select-arrow {
  color: rgb(10, 73, 99);
}

/***    /deep/ too works   ****/
/deep/ .mat-select-arrow {
  color: rgb(10, 73, 99);
}

缺点（方法2的警告）： Angular计划放弃对ng-deep的支持。有this recent conversation on git个替代项。另外，它在官方网站上也有显示，因为::ng-deep仅用于 deprication support 期间的缓冲。

仅在模拟视图封装中使用/ deep /，>>>和:: ng-deep。默认是最常用的视图封装。有关更多信息，请参见“控制视图封装”部分。

参考文献：
https://github.com/angular/angular/issues/25160
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Answer 2

假设您正在使用此

：

https://material.angular.io/components/select/overview

这里的箭头是用纯CSS制成的：

.mat-select-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid;
    margin: 0 4px;
}

要更改此设置，请覆盖边框值并设置背景图像

Answer 3

我遇到了同样的问题，请按照以下步骤解决。

首先，我将.css的这一行添加到component.css中，以隐藏Mat-arrows

:: ng-deep .mat-select-arrow { 不透明度：0； }
然后，我在matselect之后但在MatFormField中添加了matIcon。
```
<mat-icon matSuffix>domain</mat-icon>
```

或。您可以通过添加border-images-source

来添加自定义图标URL图像。

谢谢

Answer 4

通过这种方式，您可以在整个应用程序中更改该mat-select元素：

创建此文件：mat-select.scss（或您想要的名称，但具有scss扩展名）

（根据您的文件系统结构，用于img / svg导入），将其放入其中：

.mat-select-arrow-wrapper {
  background-image: url("./assets/chevron-down.svg");

 }

 .mat-select-arrow {
   opacity: 0;
 }

将新的scss文件导入到styles.scss中（根据新文件的位置）：

@import'./../ mat-select';

微笑

Answer 5

我遇到了同样的问题，必须设置'border-image-source'属性。

::ng-deep .mat-select-arrow {
    border-left: 15px solid transparent !important;
    border-right: none !important;
    border-top: 15px solid transparent !important;
    border-image-source: url('my img url') !important;
    border-image-repeat: stretch !important;
}

希望这会有所帮助！

Answer 6

不建议使用ng::deep，并且不建议更改封装，因此建议以下解决方案：

1）将课程添加到选择。

<mat-select class="my-class">

2）在 src / styles.scss

中配置您的首选项

.my-class .mat-select-arrow {
    // your preferences here.
}

.my-class .mat-select-arrow-wrapper {
    // your preferences here.
}

另请参见：

https://github.com/angular/angular/issues/25160

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

https://github.com/angular/components/blob/master/src/material/select/select.html#L15

Answer 7

1) .mat-select-arrow 的 css 变化

.mat-select-arrow {
    border-left: unset !important;
    border-right: unset !important;
}

2)mat图片/图标的后缀

 <mat-form-field class="input-field">
        <mat-label>Label</mat-label>
        <mat-select  formControlName="lableName" id="labelId" >
           <mat-option *ngFor="let m of DataObj[v].option" [value]="m">{{m}}
           </mat-option>
        </mat-select>
        <i matSuffix class="icon-down"></i>
  </mat-form-field>

Answer 8

我遇到了同样的问题。我尝试了边框图像，但边框图像可以重复。在 safari 浏览器上，边框图像效果不佳。该问题也可能在 chrome 中仍然存在。

我们应该在 mat-arrow-wrapper 类上使用背景图像而不是边框图像。背景图像重复属性可以设置为不重复，图像可以设置为中心。这适用于 chrome 和 safari。

 :host ::ng-deep .mat-select-arrow-wrapper {
  background-image: url('../../../assets/icons/anyimage.png');
  background-repeat: no-repeat;
  background-position: center;
}

我们必须隐藏默认箭头。为此，我们可以将 border: none 用于 mat-select-arrow。此外，如果您想向左调整图像，请增加 mat-select-arrow 的宽度。

:host ::ng-deep .mat-select-arrow {
  border: none;
  width: 20px;
}

Answer 9

请添加边框：无样式

.mat-select-arrow {
  ...
  border: none;
  ...
}

并尝试更改宽度和高度属性。因为它们具有 0px 的默认值。如果需要的话。

更改垫选择箭头图标

9 个答案: