Question

我正在使用Angular 5，并希望更改占位符文本颜色。列表的文本内容完全正常（我可以更改颜色），但不是占位符。我不是通过应用程序的主要css搜索硬编码解决方案，我需要通过代码动态更改它。

<mat-form-field>
    <mat-select placeholder="{{'TXTKEY' | translate }}" [style.color]="config.textColor">
        <mat-option *ngFor="let item of items" [value]="item.identifier" (click)="OnChange(item)">
            <div [style.color]="config.textColor"> {{item.name}}</div>
        </mat-option>
    </mat-select>
</mat-form-field>

Answer 1

仅使用代码解决此问题很难。这是一个半程序的解决方案。线索是使用ngClass。但是，您需要预定义类。

<强> HTML

subScene.setFill(Color.WHITESMOKE);
subSceneRoot.getChildren().add(new AmbientLight(Color.WHITE));

<强>打字稿：

<mat-form-field>
    <mat-select [ngClass]="className" placeholder="{{someText}}">
        <mat-option *ngFor="let item of items" [value]="item.value">
            {{ item.viewValue }}
        </mat-option>
    </mat-select>
</mat-form-field>

<强> CSS ：

  someText = "Enter your choice";
  someCondition = true;

  get className() {
    return this.someCondition ? 'class1' : 'class2';
  }

DEMO

Answer 2

您可以创建自己的CSS类并通过[ngClass]指令动态添加它们。

在您的HTML模板中

<input [ngClass]="{ 'classRed': colour==='red' , 'classGreen': colour==='green' }" placeholder="Type something here...">

在CSS文件中

.classRed::placeholder {
  color: red;
}

.classGreen::placeholder {
  color: green;
}

请注意，根据您支持的浏览器，需要一些不同的实现：

.classRed::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: red;
   opacity: 1; /* Firefox */
}
.classGreen::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: green;
   opacity: 1; /* Firefox */
}
.classRed:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: red;
}
.classGreen:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: green;
}
.classRed::-ms-input-placeholder { /* Microsoft Edge */
    color: red;
}
.classGreen::-ms-input-placeholder { /* Microsoft Edge */
    color: green;
}

在你的打字稿文件中

private colour = 'green';

这只是一个示例，但它允许您在运行时动态调整占位符文本的颜色。您可以根据自己的需要自由优化。 ;）

Answer 3

您可以使用

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

请记住，此方法将很快被淘汰，因此您可以将.mat-select-placholder添加到全局样式表中，并且该样式表也应该在那里工作。

通过代码更改角度垫选择占位符颜色

3 个答案: