(Angular) ng-deep to change specific elements

Question

If anyone knows how to change specific elements with ng-deep.

I want to change the color of placeholder from Grey to White.

〇HTML

<md-input-container class="header-inputContainer"> <input class="header-inputBar" mdInput placeholder="荷主"> </md-input-container>

〇CSS

::ng-deep .mat-input-placeholder {color: #fff;}

from this

to this.

but CSS affects other element's placeholder like this.

・element in other component(without CSS above)

・element in other component(with CSS above)

adding class name in CSS doesn't work. If anyone could help out, that be much appreciated.

Answer 1

An alternative solution is to give it a class name, and then refer to it in your global styling (style.css).

.header-inputBar.mat-input-placeholder {
    color: #fff;
}