web-dev-qa-db-fra.com

Comment changer la taille et la couleur de la police de caractère fictive material2 md input?

Comment changer la taille et la couleur de la police de caractère fictive material2 md input?

vérifier le lien de cette image

angularmaterial-designangular-material2
5
Nithyanandam G

NOTE:/deep/est maintenant DEPRECATED, utilisez : Host :: ng-deep à la place. Gardez à l'esprit que: ng-deep est techniquement également déconseillé et sera remplacé par un combinateur, mais devrait être utilisé pour le moment

Le problème que vous rencontrez concerne ViewEncapsulation. C'est une gêne, mais d'après ce que j'ai pu comprendre, cela fonctionne comme prévu.

Avec quelques caractères supplémentaires, vous avez la possibilité de changer le style à votre guise. Vous devez utiliser le sélecteur spécial :/deep/

Par exemple, si vous souhaitez modifier la couleur du texte de substitution comme décrit dans votre question, créez un style comme celui-ci:

/deep/ .mat-input-placeholder {
    color: #fff;
    font-size: 2em;
}

Cela ne changera cependant pas le style de soulignement. Si vous vouliez changer cela, ajoutez simplement un autre style comme:

/deep/ .mat-input-ripple.mat-focused {
    background-color: #fff;
}

Si vous souhaitez toujours attribuer un style au composant de matériau dans un composant spécifique, vous pouvez utiliser le sélecteur : hôte :

:Host /deep/ .mat-input-placeholder {
   font-size: 2em;
}
18
Victor Procure

vous pouvez écrire votre propre style dans votre style css/scss, par exemple:

md-input-container{  width: 100%;  .md-input-placeholder {
color: #a8a8a8;
padding: 0 12px;

&.md-float {
  &.md-focused,
  &:not(.md-empty) {
    transform: translateY(-100%) scale(0.95);
  }
}  }}
1
eyalewin

Suivre pour moi

En fichier .CSS

::ng-deep .mat-input-wrapper{
  font-size: 10pt;
}
1
David

Vous devez utiliser: Host selector dans votre css:

:Host input.md-input-element {
    color: red;
    font-size: 18px;
 }
0
iMad