0
votes

Using Angular 7+ and Angular Material I'm looking to change the color of the Placeholder text on input fields.

Reviewing similar questions I've tried using ::ng-deep and mat-placeholder. I got it to work using mat-placeholder, however this will be removed in future versions of Angular Material.

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>
</form>

Change the color of the matInput placeholder text.

1

1 Answers

0
votes
<mat-form-field>
<input matInput type="text">
<mat-placeholder class="placeholder">Email</mat-placeholder>
</mat-form-field>

    .mat-form-field-underline {
    /*change color of underline*/
    background-color: #dce2f4 !important;
    } 

    .mat-form-field-ripple {
    /*change color of underline when focused*/
    background-color: #2e2f36 !important;
    } 
    .placeholder {
      color:  #dce2f4 ;

    }