How to change text box placeholder color in Angular 6 Material

Question

Angular 6 material code.

<mat-form-field>
    <input matInput placeholder="Input">
  </mat-form-field>

I wanted to change default color when input element get focused.

I have already tired this. How do i change md-input-container placeholder color using css in angular material

nothing seems work.

score 4 · Accepted Answer · edited Sep 10 '18 at 11:13

4

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.

edited Sep 10 '18 at 11:13

Vignesh R

579
2
7
19

answered Sep 10 '18 at 10:07

Nenad Radak

3,550
2
27
36

yeah thanks..partially works..label color got changed. text box underline is not changing. – Vignesh R Sep 10 '18 at 10:22
Do you want to underline also change color on select ? – Nenad Radak Sep 10 '18 at 10:23
underline color permanently appearing on text box. color should apply when it get focused only. pls check this https://xnpmjmxvknx.angular.stackblitz.io – Vignesh R Sep 10 '18 at 10:34
It works as expected. but code worked only after i removed ::ng-deep prefix. i am using chrome. and i don't want initial text box blue color underline. so i have only used 1, 3rd style alone. i skipped 2nd style. Thank u so much. – Vignesh R Sep 10 '18 at 10:47
Could u pls remove ::ng-deep. I have checked out in stackblitz also. see this https://stackblitz.com/angular/xnpmjmxvknx?file=styles.css – Vignesh R Sep 10 '18 at 11:12
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/179785/discussion-between-vignesh-r-and-nenad-radak). – Vignesh R Sep 11 '18 at 05:27
Your code was NOT working for Angular 6, it needs the NG-deep and the !important tag: ::ng-deep .mat-focused .mat-form-field-label {color: #3A4558 !important;} – Darren Street Feb 03 '20 at 17:20

Corné · Answer 2 · 2019-05-09T22:26:09.787

For Angular 7 and Material 7, this worked for me:

/* Placeholder overrides */
:host ::ng-deep input::-webkit-input-placeholder {
    color: rgba(255,255,255, 0.7) !important;
}

:host ::ng-deep input:-moz-placeholder { /* Firefox 18- */
    color: rgba(255,255,255, 0.7) !important;
}

:host ::ng-deep input::-moz-placeholder {  /* Firefox 19+ */
    color: rgba(255,255,255, 0.7) !important;
}

:host ::ng-deep input:-ms-input-placeholder {
    color: rgba(255,255,255, 0.7) !important;
}

For the underline, I used an outline styled input but you can just change the class used.

/* Appearance around each input/button to remove faded outline 
but put the dark hover back in */
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
    color: transparent !important;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-thick {
    color: rgba(255, 255, 255, 0.87) !important;
}

While I don't think this is the best way of doing it, especially using ::ng-deep, it's the only thing that works right now for a specific component, for me.

How to change text box placeholder color in Angular 6 Material

2 Answers2

Linked