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

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/(阅读本文档).您应该使用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;
}

链接到工作演示.

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

Answer 2

将此添加到您的 style.css

    .mat-form-field.mat-focused .mat-form-field-ripple{
        background-color: blue;
    }
    .mat-form-field.mat-focused.mat-primary .mat-select-arrow {
        color: blue;
    }    
    .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
        color: blue;
    }