web-dev-qa-db-ja.com

angular materialでcssを使用してmd-input-containerプレースホルダーの色を変更するには

Angular Material）でcssを使用してmd-input-containerプレースホルダーの色を変更するにはどうすればよいですか？下のスクリーンショットとして、電話番号とパスワードのテキストフィールドがあります。電話番号のテキストフィールドには電話番号があり、パスワードにはパスワードがありますプレースホルダー名。

enter image description here

cssangularjs-material
12
digit

プレースホルダーは<label> in Angular Material 。したがって、実際には、プレースホルダーではなくラベルをスタイルする必要があります。

入力をクリックする（フォーカスする）とすぐに<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.

21
Saurav Rastogi

angularの最後のバージョンでは、入力のプレースホルダーを削除して、mat-form-fieldにmat-placeholderを追加できます。クラスでCSSをカスタマイズします

html：

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

css：

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

@Wenacaryがこの投稿で述べたように、 変更方法Angular 5 Material input placeholder？

angularの最後のバージョンでは、入力のプレースホルダーを削除し、mat-form-fieldにmat-placeholderを追加し、クラスでcssをカスタマイズできます

html：

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

css：

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

In Angular 4+

最初に、ViewEncapsulationをオフにしてMaterial Elementsをスタイルする必要があります。これはAngular emulated-shadow DOMのデフォルトを破壊していることに注意してください。注意して進めてください（ https://blog.thoughtram.io/angular/2015/06/29/ shadow-dom-strategies-in-angular2.html ）。

Dummy.component.ts内：

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

次に、<mat-form-field>要素にdummy.component.htmlの一意のクラスを与えます。

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

最後にdummy.component.cssでスタイルを適用します：

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

同様に、フィールドにフォーカスがある場合に色を動的に変更する場合：

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

mdの代わりにmat接頭辞を持つマテリアルの新しいバージョンの場合プレフィックス、次の2つの方法でこれを行うことができます。

方法1：view encapsulationをnoneに設定してから、上記の回答で指摘した@ user2245995のように、コンポーネントcssファイルにスタイルを書き込むこれはangularが示唆する方法ですが、ここで記述したスタイルはすべての子/親コンポーネントに伝播し、そこで他の要素に影響することに注意してください。

方法2：シャドウピアシング子孫コンビネータを使用できます、つまり/ deep /または:: ng-deepまたは>>>例

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

このメソッドはangular docsで指定されていますが、このメソッドは間もなく廃止されると述べています。詳細はこちら： https://angular.io/guide/ component-styles＃！＃-deep-

1
rgantla