How to change css of asterick generated by required in angular material form field?

Question

I am using angular material in angular6 app.

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

This is required field and in the placeholder of this input field, "*" is append after placeholder like below:

I want to change the color of "*" in the placeholder to red. How can i change the color?

Html Generated by the above mat-form-field:

Answer 1

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

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

Answer 2

Just try this,In html part

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

and add the following code in the component .css file

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

Answer 3

There is an input on matFormField you can use hideRequiredMarker as you can see here https://material.angular.io/components/form-field/api

   <mat-form-field fxFlex hideRequiredMarker="true">
        <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>

Then maybe you can try to do your own stuff with pseudoClasses in CSS :after

Answer 4

ckIkram 's suggestion was good but i figured out another solution.

Angular Material treat place holder as a label, so i wrote this css to change the color of asterick *.

/deep/ label span.mat-form-field-required-marker{
   color:red;
}

This is what's worked for me but a word of caution, the /deep/ selector is depreciated so eventually this wont work in future...

Answer 5

在你的 css 文件中添加以下代码：

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

Answer 6

Unfortunately even the styling of the placeholder text is pretty experimental, and I tried adding the :after pseudo-selector to get the red star, but it didn't work.

The below is the nearest I could get to what you wanted.

 ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #ccc; } ::-moz-placeholder { /* Firefox 19+ */ color: #ccc; } :-ms-input-placeholder { /* IE 10+ */ color: #ccc; } :-moz-placeholder { /* Firefox 18- */ color: #ccc; } label:after { content: " *"; color: #ff0000; }

 <label>Email</label> <br/> <input type="email" placeholder="Email" class="required">

Alternatively, you could make the entire placeholder text red, and include a star in it.