How to Change Material Input Placeholder Color in Angular?

To change a material input placeholder color in Angular, you have to override the default placeholder color by preceding the .mat-input-element class with ::ng-deep.

You just need to put the below code in your component’s CSS file. It will change the input placeholder color to red. Later, you can change it to whatever color you want by just changing the color property’s value:

:host ::ng-deep .mat-input-element::placeholder{
    color: red;

    /* Add other styles */

This is how the input will look like after applying the above styles:

change material input placeholder color

You can also add other styles to the placeholder such as font-style, font-size, etc. It’s totally up to you:

:host ::ng-deep .mat-input-element::placeholder{
    color: red;
    font-style: italic;
    font-size: 1.1em;

This is how the input element will look like after applying the above styles:

Add styles to material input placeholder


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.