Question

我正在尝试更改垫选择占位符的颜色。如果这是“背景颜色”，则效果很好，但如果是“颜色”，则效果不佳。这是我的CSS代码：

let asyncFoo = 
    async {
        blockingFoo() |> ignore
    }

async {
    // "fire and forget"
    asyncFoo |> Async.Start

    // trigger the computation
    let! comp = Async.StartChild asyncFoo

    // do other work here while comp is executing

    // await the results of comp
    do! comp
}

这是hmtl代码：

/deep/ .mat-select-placeholder {
  color: red;
 }

 .mat-select-placeholder {
   color: red;
 }

我也尝试过/ deep /，但仍然无法正常工作。文本始终为黑色。那么，为什么它适用于背景颜色而不适用于颜色？我的另一个问题是，当列表中选择了mat选项时，即使将颜色设置为红色，并且将背景色也设置为红色，占位符（看起来较小）始终为黑色。感谢您的帮助。

Answer 1

我已经设法更改了占位符的颜色

style.css

mat-form-field span.mat-form-field-label-wrapper label {
  color:orange !important;
}

mat-form-field.mat-focused span.mat-form-field-label-wrapper label {
  color:green !important;
}

stackblitz demo

Answer 2

与@malbarmavi的答案极为相似，我只需要添加:: ng-deep即可使其起作用：

::ng-deep mat-form-field span.mat-form-field-label-wrapper label {
  color:orange !important;
}

::ng-deep mat-form-field.mat-focused span.mat-form-field-label-wrapper label {
  color:green !important;
}

Answer 3

这对我来说很好：

::ng-deep .mat-select-placeholder {
    color: orange !important;
}

如何更改垫选择占位符的颜色？

3 个答案: