聚焦时更改垫选择箭头和垫选择下划线 [英] Change mat-select-arrow and mat-select-underline when focused

问题描述

到目前为止，我已经尝试了很多不同的方法，例如:

So far I've tried lots of different things, such as:

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

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

to change that little arrow next to a select, and the underline.

例如，我做了

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

表示输入的下划线，并且效果很好(聚焦时变为绿色). (是的/deep/对此项目效果很好，但是如果我记得很好的话，现在不推荐使用此方法)

for the underline of an Input, and it worked fine (it becomes green when focusing). (yes /deep/ works fine for this project, though it's deprecated now if I remember well)

我设法一直对其进行更改，但是我想要的是使它仅聚焦在绿色上，并保持如果不聚焦则为灰色.

I managed to change it "all the time", but what I want, is to have it green only on focus, and keep it grey if not focused.

推荐答案

避免使用/deep/(请阅读 ViewEncapsulation .

Avoid using /deep/ (read this documentation). You should use ViewEncapsulation.

在ts文件中，将ViewEncapsulation设置为None:

In your ts file, set ViewEncapsulation to None:

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

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

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

.. and add the following classes to your component's css file:

/* 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，

To make the css shorter,

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

这篇关于聚焦时更改垫选择箭头和垫选择下划线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！