如何更改角材料表单字段中所需生成的星号的css？

Question

我在 angular6 应用程序中使用角材料。

        <mat-form-field fxFlex>
            <mat-label [class.form-label]="fg.get('email').valid && fg.get('email').touched">{{attributesLabels.email}}</mat-label>
            <input matInput formControlName="email" required [autofocus]="true">
            <mat-error *ngIf="fg.get('email').hasError('required')">Email is required</mat-error>
            <mat-error *ngIf="fg.get('email').hasError('email') && !fg.get('email').hasError('required') ">Invalid email</mat-error>
        </mat-form-field>

这是必填字段，在此输入字段的占位符中，“*”附加在占位符之后，如下所示：

我想将占位符中“*”的颜色更改为红色。我怎样才能改变颜色？

Html 由上面的 mat-form-field 生成：

Answer 1

对我来说，这个超级简单的事情是在styles.scss 中的项目的根，只是把

.mat-form-field-required-marker { color: red }

Answer 2

试试这个，在html部分

 <mat-form-field class="mat-form-field-fluid" appearance="outline">
    <mat-label class="asterisk_input" >First Name</mat-label>
    <input matInput formControlName="email" />
</mat-form-field>

并在组件 .css 文件中添加以下代码

.asterisk_input::after 
{
    content:" *"; 
    color: red;
}