gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 17:44:29 27 4
gpt4 key购买 nike

到目前为止,我已经尝试了很多不同的东西,例如:

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

用于输入的下划线,效果很好(聚焦时变为绿色)。 (是的,/deep/对这个项目很好用,但如果我没记错的话现在已经弃用了)

我设法“一直”更改它,但我想要的是让它仅在聚焦时为绿色,而如果未聚焦则保持灰色

最佳答案

避免使用 /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 .

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

关于angular - 聚焦时更改 mat-select-arrow 和 mat-select-underline,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46280619/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com