material2の入力プレースホルダのフォントサイズと色を変更するにはどうすればよいですか？

Question

material2の入力プレースホルダーのフォントサイズと色を変更するにはどうすればよいですか？

check this image link

Answer 1

あなたは、たとえば、あなたのスタイリングCSS/SCSSで独自のスタイルを書き込むことができます。

md-input-container{ width: 100%; .md-input-placeholder { 
color: #a8a8a8; 
padding: 0 12px; 

&.md-float { 
    &.md-focused, 
    &:not(.md-empty) { 
    transform: translateY(-100%) scale(0.95); 
    } 
} }} 

Answer 2

あなたが使用する必要があります：あなたのCSSでのホストセレクタ：

:host input.md-input-element { 
    color: red; 
    font-size: 18px; 
} 

Answer 3

を注：/ deep /は現在使用できません。：host :: ng-deepを使用してください。心に留めておいてください:: ng-deepは技術的に廃止され、コンビネータに置き換えられますが、当面は使用されるべきです

問題はViewEncapsulationで問題になります。それは迷惑ですが、私が集めることができたことから、それは意図したとおりに働いています。

あなたの好みに合わせてスタイルを変更するには、いくつかの余分な文字がありますが、能力はあります。あなたの質問で説明したようにプレースホルダーテキストの色を変更したい場合は、このようなスタイルを作成しますたとえばspecial selector: /deep/

を使用する必要があります。

/deep/ .mat-input-placeholder { 
    color: #fff; 
    font-size: 2em; 
} 

しかしこれは変更されません下線のスタイル。

:host /deep/ .mat-input-placeholder { 
    font-size: 2em; 
}