How do you change the placeholder colour on a angular/material input placeholder?
<mat-form-field>
<input matInput placeholder="Name">
</mat-form-field>
How do you change the placeholder colour on a angular/material input placeholder?
<mat-form-field>
<input matInput placeholder="Name">
</mat-form-field>
In the last version of angular you can remove the placeholder in the input and add a mat-placeholder in the mat-form-field and custom the css with a class
html :
<mat-form-field>
<input matInput type="text">
<mat-placeholder class="placeholder">Search</mat-placeholder>
</mat-form-field>
css:
.mat-focused .placeholder {
color: #00D318;
}
To change the color of placeholder, override the color property of .mat-form-field-placeholder like:
::ng-deep .mat-form-field-placeholder{
color:red;
}
::ng-deep .mat-focused .mat-form-field-placeholder{
color:red;
}
To change the color of underline:
::ng-deep .mat-form-field-underline .mat-form-field-ripple{
background-color:red;
}
::ng-deep .mat-form-field-underline{
background-color:red;
}
This works perfect. Demo: https://plnkr.co/edit/yF4kXJ500YzefLOnLKNe?p=preview
I am using angular material 8.2.3 and None of the above solutions worked for me and having the following in theme.scss(material theme file) worked for me
.mat-input-element::placeholder{
color: red;
}
conversely with piercing the following should work in component styles
::ng-deep .mat-input-element::placeholder{
color: red;
}
Non of the above answers worked for me in latest versions.
Here is working solution
::ng-deep .mat-form-field-label{
color:#000 !important;
}
What options we have?
<mat-placeholder> tag is deprecated: https://material.angular.io/components/form-field/api#MatPlaceholder
/deep/ selector will be deprecated soon. ::placeholder selector is still experimental feature: https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
So I would recommend to use input placeholder as an attribute only if your clients have modern browsers.
Angular material in itself doesn't provide any directives for setting styles.For this, you need to go old school. Just give an id/class to your input element then use pseudo class (::placeholder). For reference : https://css-tricks.com/almanac/selectors/p/placeholder/