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

表示输入的下划线，并且工作正常（聚焦时变为绿色）。（是/深/适用于这个项目，虽然如果我记得很清楚它现在已被弃用）

我设法改变它＆＃34;所有的时间＆＃34;，但我想要的是，只有焦点绿色，如果不专注，保持灰色

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

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

Answer 3

对于角度材料2并设置输入的下划线，我必须设置：

.mat-form-field-ripple {
background-color: red;
}

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

3 个答案: