CODEWITHSUNDEEP
angularplaceholdermat-form-field
Pedro Ramírez Pérez
Pedro Ramírez Pérez

Reputation: 123

Angular Mat-form-field placeholder color

I have a form with an input in a mat-form-field. It includes placeholder but I don't know how to set placeholder text color.

When I've not focused previously the input, the placeholder color is grey:

enter image description here

When input get focused then it turns purple:

enter image description here

When input lose the focus then it turns red:

enter image description here

My requirement is to change the purple one. I've tried this solution: https://css-tricks.com/almanac/selectors/p/placeholder/ But It didn't work for me.

Any idea?

UPDATED:

This is the inspected input:

<input _ngcontent-bqk-c14="" class="inputSearch input-textstyle mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored ng-pristine ng-invalid ng-touched" formcontrolname="description" matinput="" type="text" ng-reflect-autocomplete="[object Object]" ng-reflect-name="description" ng-reflect-placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Buscar" ng-reflect-type="text" autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" id="mat-input-1" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Buscar" aria-invalid="true" aria-required="false">

Thanks in advance!

Upvotes: 3

Views: 6827

Answers (2)

Tom Lauda
Tom Lauda

Reputation: 1

When using the input "placeholder" attribute, you can change the styling with a simple css selector :

<mat-form-field>
  <mat-label>My label</mat-label>
  <input matInput type="text" placeholder="my placeholder"/>
</mat-form-field>

input::placeholder {
  color: green;
}

You don't need to use the global stylesheet. It will not target the default mat-label placeholder, it only works with the attribute

Upvotes: 0

Santhosh V
Santhosh V

Reputation: 410

In style.scss file, place the following style

.mat-input-placeholder {
    color: red; /* Any color */
}

Please note this will override the Angular Material default style, everywhere. If you want to apply this in only inside the component, paste the below in your.component.scss file

::ng-deep .mat-input-placeholder { 
   color: red; /* Any color */
}

Upvotes: 0

Related Questions