web-dev-qa-db-fra.com

Comment changer la couleur de l'espace réservé de md-input-container à l'aide de CSS en matériau angulaire

Comment changer la couleur de l'espace réservé de md-input-container à l'aide de CSS dans Angular Material? Comme capture d'écran ci-dessous, j'ai un numéro de téléphone. et mot de passe textfield. Pas de téléphone. textfield a le numéro de téléphone et le mot de passe a le nom d’espace réservé Mot de passe. 

 enter image description here

cssangularjs-material
8
digit

L'espace réservé est représenté par un <label> dans Matériau angulaire . Donc, vous devez en fait styler l’étiquette et non l’espace réservé.

Dès que vous cliquez (accentuez) sur l'entrée, ce <label> qui se présente comme un espace réservé glisse vers le haut et est converti en un formulaire <label>.

Il suffit donc d’appliquer ce 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;
}

Jetez un coup d’œil à ceci Démo Plunkr.

18
Saurav Rastogi

dans la dernière version de angular, vous pouvez supprimer le paramètre fictif dans l'entrée et ajouter un mat-espace réservé dans le mat-form-field et personnaliser le css avec une classe 

html:

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

css: 

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

En angulaire 4+

Vous devez d’abord désactiver ViewEncapsulation pour styler les éléments de matériau. Soyez averti que ceci est en train de renverser le défaut du DOM angulaire émulé angulaire et vous devez procéder avec prudence ( https://blog.iblytram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html ).

Dans dummy.component.ts:

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

Donnez ensuite à votre élément <mat-form-field> une classe unique dans dummy.component.html:

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

Enfin dans dummy.component.css, appliquez le style:

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

De même, si vous souhaitez modifier dynamiquement la couleur si le champ est activé:

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

Comme @Wenacary l'a expliqué dans cet article: Comment changer d'espace réservé pour l'entrée de matière angulaire 5?

Dans la dernière version de angular, vous pouvez supprimer l’espace réservé dans le fichier entrez et ajoutez un espace réservé au tapis dans le champ du formulaire et personnalisez le css avec une classe

html:

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

css:

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

Pour les versions plus récentes du matériel qui ont un préfixe mat au lieu de md, vous pouvez le faire de deux manières:

manière 1: en utilisant view encapsulation, réglez sur none, puis en écrivant les styles dans le fichier CSS de composants, comme l'a souligné @ utilisateur2245995 dans la réponse ci-dessus. Bien que ce soit ce que angular suggère, veuillez noter que les styles que vous écrivez ici se propageront à tous les composants enfant/parent et y affecteront d’autres éléments.

voie 2: Nous pouvons utiliser les combinateurs descendants shadow perforants, à savoir / deep/ ou :: ng-deep ou >>>. Voici un exemple

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

Bien que cette méthode soit spécifiée dès maintenant dans la documentation angulaire, ils ont indiqué que cette méthode serait bientôt obsolète . En savoir plus: https://angular.io/guide/component-styles#!#-deep -

1
rgantla