web-dev-qa-db-fra.com

Comment changer l'espace réservé à l'entrée de matériau angulaire 5?

Comment changer la couleur de l'espace réservé sur un espace réservé d'entrée angulaire/matérielle?

<mat-form-field>
    <input matInput placeholder="Name">
  </mat-form-field>
angularangular-material
6
FirmCiti Inc

Pour changer la couleur de l'espace réservé, remplacez la propriété color de .mat-form-field-fieldholder de la manière suivante:

::ng-deep .mat-form-field-placeholder{

  color:red;
}

::ng-deep .mat-focused .mat-form-field-placeholder{

  color:red;
}

Pour changer la couleur du soulignement:

::ng-deep .mat-form-field-underline .mat-form-field-ripple{

  background-color:red;
}

::ng-deep .mat-form-field-underline{

  background-color:red;
}

Cela fonctionne parfaitement. Démo: https://plnkr.co/edit/yF4kXJ500YzefLOnLKNe?p=preview

9
mohit uprim

Dans la dernière version de angular, vous pouvez supprimer le paramètre fictif dans l'entrée et ajouter un paramètre générique dans le champ 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;
}
7
Wenakari

Pour le matériau angulaire 5.x.x ou supérieur, vous pouvez utiliser un élément mat-placeholder. Vous n'avez pas besoin de remplacer les classes CSS principales. Cette approche - je pense - est la meilleure:

  <mat-form-field class="full-width">
            <input matInput type="text" name="name" formControlName="name" >
            <mat-placeholder style="color:brown">Enter your name here</mat-placeholder>
            <mat-icon matSuffix class="material-icons">perm_identity</mat-icon>
          </mat-form-field>

Remarque: vous ne pouvez pas utiliser l'attribut d'espace réservé dans une balise d'entrée en même temps avec un élément mat-placeholder dans la même balise mat-form-field. 

Pour plus d'informations: https://material.angular.io/components/input/overview#floating-placeholder

1
Ebleme

Quelles options avons-nous?

  1. La balise <mat-placeholder> est obsolète: https://material.angular.io/components/form-field/api#MatPlaceholder

  2. Le sélecteur /deep/ sera bientôt obsolète. Le sélecteur ::placeholder est toujours une fonctionnalité expérimentale: https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder

Je recommanderais donc d’utiliser l’espace réservé aux entrées comme attribut uniquement si vos clients disposent de navigateurs modernes.

0
Alexey S.

Une solution fournie par le matériau 2 lui-même se trouve dans exemple de code . J'ai fait un échantillon ici:

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

Plunker

0
Utpal Kumar Das