как уменьшить размер шрифта заполнителя в angular материале

Question

Я пытаюсь уменьшить размер шрифта для заполнителя в angular материале.

вот мой код:

 <form class="example-form">
   <mat-form-field class="example-full-width">
     <input matInput placeholder="Favorite food" value="Sushi">
   </mat-form-field>
   <mat-form-field class="example-full-width">
     <textarea matInput placeholder="Leave a comment"></textarea>
   </mat-form-field>
 </form>

это код, который я пробовал в css:

 ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      font-size: 0.8em;
  }
 ::-moz-placeholder { /* Firefox 19+ */
     font-size: 0.8em;
  }
 :-ms-input-placeholder { /* IE 10+ */
     font-size: 0.8em;
  }
  :-moz-placeholder { /* Firefox 18- */
    font-size: 0.8em;
 }

Answer 1

Попробуйте добавить этот стиль. Он должен быть помещен в глобальную таблицу стилей, например стили. css

 .mat-form-field-appearance-legacy .mat-form-field-label {
   font-size: 0.8em;
 }

https://stackblitz.com/edit/angular-material-playground-1c8n9u?file=src / styles / _variables.s css

Answer 2

Вы можете изменить свой CSS, как показано ниже:

.mat-form-field::placeholder {
   font-size: 12px; // Your desiered font size
}