Comment puis-je changer md-entrée-conteneur espace réservé couleur à l'aide de css dans angulaire du matériel

Comment puis-je changer md-entrée-conteneur espace réservé couleur à l'aide de css dans Angulaire du Matériel? Comme la capture d'écran ci-dessous, j'ai pas de téléphone. et le champ de mot de passe. Pas de téléphone. textfield a Pas de Téléphone. et le mot de passe par un Mot de passe nom d'espace réservé.

OriginalL'auteur digit | 2016-12-18

angularjs-material css

19

Espace réservé est dépeint comme un <label> dans Angulaire Du Matériel. Si vous avez réellement besoin pour le style de l'étiquette de ne pas l'espace réservé.

Dès que vous cliquez sur (mise au point) sur l'entrée de cette <label> qui est à la recherche comme un espace réservé glisse vers le haut et converti en une forme <label>.

Vous avez juste besoin 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 oeil à cette Plunkr Démo.

sa ne fonctionne pas
Ouais. C'est le travail.Merci
les classes sont nommées de la même Matériau 2, mais cette solution ne fonctionne plus 🙁
que faire si votre utilisation de md-pas-float. Dans ce cas, vous n'avez pas l'utilisation d'une étiquette.. Comment voulez-vous changer la couleur de l'espace réservé. Je l'ai eu à modifier à l'aide de cette input.box::-webkit-input-placeholder, textarea.box::-webkit-input-placeholder { color: white; } bur quand je clique sur le champ de saisie et theres concentrer la couleur change à nouveau

OriginalL'auteur Saurav Rastogi
20

dans la dernière version angulaire, vous pouvez supprimer l'espace réservé à la saisie et ajouter un mat-espace réservé dans le mat-forme-champ et personnalisé 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;
}
```
Bienvenue DONC. Veuillez faire un tour sur stackoverflow.com/tour
Génial solution !
juste: .espace réservé { color: #00D318; } travailleur pour moi lors de l'utilisation de votre méthode. Merci... Super solution ! ✅ ✅ ✅
Vous êtes les bienvenus! Merci aussi parce que maintenant je sais que je peux utiliser .espace réservé directement et pas nécessairement une classe personnalisée ;).
Notez que cela fonctionne uniquement avec les champs de formulaire d'apparition="héritage". Pour l'aspect="standard" ou les autres valeurs, vous devez utiliser input::placeholder.

OriginalL'auteur Wenakari
4

Angulaire 4+

D'abord, vous devrez tourner à ViewEncapsulation hors de style des Éléments. Soyez averti c'est une subversion de l'Angulaire émulé-shadow DOM par défaut et vous devez procéder avec prudence (https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html).

De mannequin.composante.ts:
```
@Component({
 ...,
 encapsulation: ViewEncapsulation.None,
})
```
Alors donner votre < mat-form-> élément d'une classe unique dans dummy.component.html:
```
<mat-form-field class="dummy-input-field" floatPlaceholder="always">
  <input placeholder="Dummy"/>
</mat-form-field>
```
Enfin dans le factice.composante.css appliquer le style:
```
.dummy-input-field .mat-input-placeholder {
  color: red;
}
```
De même, si vous souhaitez changer dynamiquement la couleur si le champ est concentré:
```
.dummy-input-field.mat-focused .mat-input-placeholder {
  color: red;
}
```
OriginalL'auteur user2245995
3

@Wenacary dit dans ce post: Comment changer Angulaire 5 Matériel d'entrée de l'espace réservé?
Dans la dernière version angulaire, vous pouvez supprimer l'espace réservé dans la
d'entrée et d'ajouter un tapis-un espace réservé dans le tapis champ de formulaire personnalisé et de la
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;
}
```
Thx pour le partage de mon post @Luiz Rossi !

OriginalL'auteur Luiz Rossi
1

Pour les nouvelles versions de matériel qui ont un mat préfixe au lieu de md préfixe, vous pouvez le faire de 2 façons:

voie 1: à l'aide de vue d'encapsulation défini sur aucun, puis écrit les styles dans le fichier css, comme @user2245995 souligné dans la réponse ci-dessus.
Bien que ce est la façon angulaire suggère, s'il vous plaît noter que les styles que vous écrivez ici se propagera à l'ensemble de l'enfant et le parent, des composants et de l'effet d'autres éléments.

chemin 2: On peut utiliser la ombre piercing descendant combinators c'est à dire /deep/ ou ::ng-deep ou >>> ci-Dessous est un exemple
```
/deep/ label.mat-input-placeholder {
  color: #fff;   //choose the color you want
}
```
Bien que cette méthode est indiquée dans l'angle des docs comme de maintenant, ils ont mentionné que cette méthode sera bientôt obsolète.
lire la suite: https://angular.io/guide/component-styles#!#-profonde

maintenant, est déjà obsolète.

OriginalL'auteur rgantla

Vous devez vous connecter pour publier un commentaire.