更改垫选择箭头图标

Question

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

我尝试了各种迭代

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

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

Answer 1

假设你正在使用这个：

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

这里的箭头是用纯 css 制作的：

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

要改变这一点，覆盖边框值并设置背景图像

编辑：添加::ng-deep；见@Ruben Szekér 的评论

Answer 2

我有同样的问题，我按照这个程序解决了。

1. 首先，我通过在 .css 的这一行下方添加到 component.css 中来隐藏 mat-arrow

   ::ng-deep .mat-select-arrow { 不透明度：0； }

2. 然后，我在 matselect 之后但在 MatFormField 内添加了 matIcon。

   <mat-icon matSuffix>domain</mat-icon>
   

或者。您可以通过添加border-images-source来添加您的自定义图标URL图像

谢谢

Answer 3

我遇到了同样的问题，我不得不设置“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 4

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

方法一）通过禁用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。此外，在官方 angular 网站中指出，::ng-deep 仅用于 deprication support 期间的缓冲。

仅在模拟视图封装中使用 /deep/、>>> 和 ::ng-deep。 Emulated 是默认和最常用的视图封装。有关详细信息，请参阅控制视图封装部分。

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

Answer 5

通过这种方式，您可以在整个应用中更改此 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 6

由于ng::deep已被弃用，不建议更改封装，我建议如下解决方案：

1) 向select添加一个类。

<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)matSuffix 到图片/图标

 <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 {
    /* Remove the top part of the existing arrow triangle to form a chevron shape */
    &::after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      margin-left: -3px;
      margin-top: -5px;
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      border-top: 3px solid white; /* This needs to match your input field background */
    }
  }

Answer 10

请添加 border: none 样式

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

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