How to Change Md-Input-Container Placeholder Color Using CSS in Angular Material

How do I change md-input-container placeholder color using css in angular material?

Placeholder is depicted as a <label> in Angular Material. So you actually need to style the label not the placeholder.

As soon as you click (focus) on the input this <label> which is looking as a placeholder slides up and converted into a form <label>.

So you just need to apply this CSS:

/* When the input is not focused */
md-input-container label {
  color: red;
}

/* When the input is focused */
md-input-container.md-input-focused label {
  color: blue;
}

Have a look at this Plunkr Demo.

How to change the colour of placeholder and input field of matInput field using of Angular material

Add this to css

    ::ng-deep .mat-form-field-underline, ::ng-deep .mat-form-field-ripple {
  background-color: white !important;
  color: white !important
}

::ng-deep .mat-form-field-empty.mat-form-field-label {
    color: white;
}

How to change the color of a placeholder in Angular Material?

I was able to achieve using something like this

Use a variable for the property in your css/scss file. And make use of ElementRef to set property declared in the css/scss file during runtime.

input {
    display: block;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    color: #333333;
    --placeHolder-color: #959595;
  }

  input::placeholder {
    color: var(--placeHolder-color);
  }

  input::-webkit-input-placeholder { /* Edge */
    color: var(--placeHolder-color);
  }

  input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--placeHolder-color);
  }

  input:-moz-placeholder {
    color: var(--placeHolder-color);
  }

  input::-moz-placeholder {
    color: var(--placeHolder-color);
  }

import { Directive, ElementRef, Host, Renderer2 } from '@angular/core';
import { CardNumberComponent } from 'src/app/themes/card-number/card-number.component';

@Directive({
  selector: '[appInputStyle]'
})
export class InputStyleDirective {

  private input: HTMLInputElement;

  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.input = this.el.nativeElement;
  }

  ngOnInit() {
    this.input.style.setProperty('--placeHolder-color', 'tomato');
  }
}

<input type="text" appInputStyle>

How to change Angular 5 Material input placeholder?

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

How to change text box placeholder color in Angular 6 Material

If i understand your question this css should work.

  .mat-focused .mat-form-field-label {
      /*change color of label*/
      color: red !important;
  }

 .mat-form-field-underline {
   /*change color of underline*/
    background-color: blue !important;
 } 

.mat-form-field-ripple {
   /*change color of underline when focused*/
   background-color: yellow !important;;
 } 

Hope it was useful.

---

Related Topics