聚焦时更改 mat-select-arrow 和 mat-select-underline

到目前为止，我已经尝试了很多不同的事情，例如：

/deep/ .mat-select:focus .mat-select-trigger .mat-select-arrow {
    color: #63961C;
}

/deep/ .mat-select:focus .mat-select-trigger .mat-select-underline {
    background-color: #63961C;
}

Or :

/deep/ .mat-select.mat-focused .mat-select-trigger .mat-select-arrow {
    color: #63961C;
}

/deep/ .mat-select.mat-focused .mat-select-trigger .mat-select-underline {
    background-color: #63961C;
}

更改选择旁边的小箭头和下划线。

例如，我做了

/deep/ .mat-input-container.mat-focused .mat-input-underline {
    background-color: #63961C;
}

对于输入的下划线，它工作得很好（聚焦时它会变成绿色）。 （是的 /deep/ 对于这个项目来说工作得很好，但如果我没记错的话，它现在已经被弃用了）

我设法“一直”改变它，但我想要的是拥有它仅在焦点处呈绿色，并保留它如果不聚焦则呈灰色.

避免使用/deep/（读这个文档）。你应该使用视图封装.

在您的 ts 文件中，将 ViewEncapsulation 设置为 None：

import { ViewEncapsulation } from '@angular/core';

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

.. 并将以下类添加到组件的 css 文件中：

/* to change arrow when focused */
.mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow {
    color: #63961C;
}

/* to change underline when focused */
.mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-underline {
    background-color: #63961C;
}

/* to change plceholder text when focused */
.mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger {
    color: #63961C;
}

/* to change selected item color in the select list */
.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
    color: #63961C;
}

Link to 工作演示.

为了使CSS更短，

.mat-select:focus:not(.mat-select-disabled).mat-primary 
.mat-select-arrow , .mat-select-underline , .mat-select-trigger 
{
    color: #63961C;
}

/* to change selected item color in the select list */
.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
    color: #63961C;
}