CODEWITHSUNDEEP
htmlangularangular-material
ts1993
ts1993

Reputation: 109

Cannot change the text color of Angular material input placeholder

I am trying to change the placeholder text color on an Angular Material input. Appears to default to black but I want it to be white due to having a dark background color.

I have read probably every post on this site on how to do this but nothing seems to work. ::ng-deep and mat-placeholder are not options.

Here is a snippet from my HTML:

    <form #searchForm="ngForm" class="example-full-width mr-auto">
      <mat-form-field style="width: 350px; font-size: 14px; margin-bottom: -15px;">
        <mat-label style="color: white;">Search for an Employee</mat-label>
        <input matInput [(ngModel)]="userIdInput" placeholder="Enter at least 2 characters of a name or ID"

Upvotes: 5

Views: 9641

Answers (2)

nash11
nash11

Reputation: 8650

To change the css of your placeholder, all you need to do is modify the color of your matInput placeholder. You can make use of the mat-input-element class in the matInput element to do this.

Ideally, I would also suggest you avoid using inline styles and use classes instead. It makes your code more readable as well.

HTML

<form #searchForm="ngForm" class="example-full-width mr-auto">
  <mat-form-field class="employee-search-field">
    <mat-label>Search for an Employee</mat-label>
    <input matInput [(ngModel)]="userIdInput" name="userIdInput" placeholder="Enter at least 2 characters of a name or ID"/>
  </mat-form-field>
</form>

In your css, add the below code.

.employee-search-field {
  width: 350px;
  font-size: 14px;
  margin-bottom: -15px;
}

.employee-search-field mat-label {
  color: white;
  /* add label text color here */
}

.employee-search-field .mat-input-element {
  color: white;
  /* add input text color here */
}

.employee-search-field .mat-input-element::placeholder {
  color: white;
  /* add placeholder css here */
}

Upvotes: 6

Divya Patel
Divya Patel

Reputation: 136

Try this

  <mat-form-field>
    <mat-label>Search for an employee</mat-label>
    <input matInput placeholder="Enter at least 2 characters of a name or ID">
  </mat-form-field>

.mat-form-field {
  width: 350px;
  font-size: 14px;
}

::ng-deep .mat-input-element::placeholder {
  color: orange;
}

::ng-deep .mat-form-field-appearance-legacy .mat-form-field-label {
  color: red;
}

Upvotes: 2

Related Questions