1
votes

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"
2
Have you checked in the debugger? Is there another setting with !important that is overriding? Is the actual label some child element that has its own stylings?krillgar
Possible duplicate of Angular Material Chips placeholderwentjun
You may refer to the above link. The placeholder colour is dependent on the very same class, mat-form-field-labelwentjun
The mat-form-field-label class does not work. I do have the ViewEncapsulation.None already set.ts1993

2 Answers

4
votes

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 */
}
0
votes

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