Material Angular change color of placeholder

Question

I am using Angular 6, Material-UI, and I am trying to change the color of the placeholder/input in the select.

.mat-select-placeholder {
    color: white !important;
   background-color: red;
}

red background is set for testing.

I am seeing that the background of it changed to red, but the text is still dark-gray.

Is there a reason it is not changing?

Answer 1

try using using ::ng-deep

::ng-deep .mat-select-placeholder {
    color: white !important;
   background-color: red;
}

hope this helps :)

Answer 2

You an use /deep/ to overwrite.

/deep/ .mat-select-placeholder {
   color: white !important;
   background-color: red;
}

Note : These options will be removed in future.

Walk through this link to understand how it works - https://blog.angular-university.io/angular-host-context/