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

This super simple thing for me was at the root of the project in styles.scss just put

.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

Add the following code in your css file:

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