角度素材でCSSを使用してmd-input-containerプレースホルダーカラーを変更するには

Question

角度素材でCSSを使用してmd-input-containerプレースホルダーカラーを変更するにはどうすればよいですか？以下のスクリーンショットのとおり、私は電話番号を持っています。パスワードのテキストフィールド。電話番号。テキストフィールドには電話番号があり、パスワードにはパスワードのプレースホルダ名が付きます。

Answer 1

プレースホルダはAngular Materialで<label>として示されています。実際にはプレースホルダではなくラベルのスタイルを設定する必要があります。

入力をクリック（フォーカス）するとすぐに、この<label>はプレースホルダとして表示され、スライドしてフォーム<label>に変換されます。

だから、あなたはこのCSSを適用する必要があります。

/* When the input is not focused */ 
md-input-container label { 
    color: red; 
} 

/* When the input is focused */ 
md-input-container.md-input-focused label { 
    color: blue; 
} 

このPlunkr Demoを見てください。角度4+

まずで

Answer 2

あなたはスタイル材質素子についてはOFF ViewEncapsulationをオンにする必要があります。これがAngularエミュレートシャドーDOMのデフォルトを覆していることに注意してください。注意が必要です（https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html）。 dummy.component.tsで

：ダミーで最後に

<mat-form-field class="dummy-input-field" floatPlaceholder="always"> 
    <input placeholder="Dummy"/> 
</mat-form-field> 

：

@Component({ 
..., 
encapsulation: ViewEncapsulation.None, 
}) 

は、その後、あなたの<マット・フォーム・フィールド>要素dummy.component.htmlでユニークなクラスを与えます。 component.cssスタイリングを適用します。

.dummy-input-field .mat-input-placeholder { 
    color: red; 
} 

同様に、動的にチャーフィールドがフォーカスされている場合NGE色：

方法1：接頭辞をmdの代わりにのマット接頭辞を持つ材料の新しいバージョンの

.dummy-input-field.mat-focused .mat-input-placeholder { 
    color: red; 
} 

Answer 3

は、あなたは2通りの方法でこれを行うことができます： カプセル化を表示をnoneに設定し、上記の答えで指摘された@ user2245995のように、コンポーネントのCSSファイルにスタイルを書き込んでください。 これは角度が示唆する方法ですが、ここで記述するスタイルはすべての子/親コンポーネントに伝播し、他の要素に影響を与えることに注意してください。

方法2：私たちは、ピアス子孫コンビネータすなわち/深い/または影を使用することができます:: NG-深いまたは>>>以下このものの

/deep/ label.mat-input-placeholder { 
    color: #fff; // choose the color you want 
} 

例ですメソッドが現在の角度ドキュメントで指定されている場合、このメソッドは間もなく廃止される予定です。 続きを読む：https://angular.io/guide/component-styles#!#-deep-

Answer 4

example codeにある物質2自体によって提供される1つの解決策。あなたが入力でプレースホルダを削除し、マット・フォーム・フィールドにマットプレースホルダを追加することができ、角度の最後のバージョンに

<mat-form-field> 
<mat-label>Input</mat-label> 
<input matInput > 
</mat-form-field> 

Plunker Demo

Answer 5

：私はここでサンプルを行っていますカスタムクラス

HTMLとCSS：

<mat-form-field> 
    <input matInput type="text"> 
    <mat-placeholder class="placeholder">Search</mat-placeholder> 
</mat-form-field> 

css：

.mat-focused .placeholder { 
    color: #00D318; 
}