变化垫选择箭头和垫选择下划线时集中

Question

到目前为止，我已经尝试了很多不同的东西，如：

/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; 
} 

或者：

/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; 
} 

对于输入的下划线，它工作得很好（对焦时它就会变成绿色）。 （是/深/为这个项目，如果我记得很清楚工作正常，但它现在不建议使用）

我设法改变它“所有的时间”，但我想，是有它绿色唯一焦点 ，并保持它灰色，如果不专注。

Answer 1

避免使用/deep/（读取此documentation）。您应该使用ViewEncapsulation。

在您的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; 
} 

链接working demo。

为了让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; 
}