CODEWITHSUNDEEP
cssangularangular-material
TikChiku
TikChiku

Reputation: 413

(Angular) ng-deep to change specific elements

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

enter image description here

to this.

enter image description here

but CSS affects other element's placeholder like this.

・element in other component(without CSS above) enter image description here

・element in other component(with CSS above)

enter image description here

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

Upvotes: 0

Views: 1502

Answers (1)

Ringo
Ringo

Reputation: 621

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;
}

Upvotes: 1

Related Questions